- 締切済み
テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- unko347
- お礼率44% (122/277)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
チェックボックスをおすと、tdでつけられたチェックがチェックボックスを おすことで外されるのでは？ どうしてもというのであればtd内のチェックボックスに「何もしない」属性を つけることです
