テーブルで、行をクリックさせたら先頭のinputタグをチェックさせるような要望がちょこちょこあるので、備忘録。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>trタグクリックでinputをチェック</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>テーブルの行をクリックでinputをチェックさせる</h1> <table class="table table-bordered"> <tr> <td><input type="radio" name="rdo" value="a"></td> <td>これはaです</td> <td>DummyA</td></tr> <tr> <td><input type="radio" name="rdo" value="b"></td> <td>これはbです</td> <td>DummyB</td></tr> <tr> <td><input type="radio" name="rdo" value="c"></td> <td>これはcです</td> <td>DummyC</td></tr> <tr> <td><input type="radio" name="rdo" value="d"></td> <td>これはdです</td> <td>DummyD</td></tr> </table> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $trList = $("tr:has(input)"); //trでinputタグをもつものを取得 $trList.each(function() { //取得したtrタグそれぞれに処理を行う var $input = $(this).find("input"); //trからinputタグを取得しておく。 $(this).click(function(){ $input.prop('checked',true); }); }); }); </script> </body> </html>