web-dev-qa-db-ja.com

jQuery Find child Checkbox

私は簡単なjQuery質問があります：

次のタイプのテーブルがあります。

<table id="my_table">
  <tr>
   <td><input type="checkbox" value="24"></td>
   <td> Click Here To Check The Box </td>
   <td> Or Click Here </td>
  </tr>
 </table>

そしてjQueryでは、クリックされたその行の対応するチェックボックスを選択しようとしています。

 $("#my_table tr").click(function(e) { 
     $(this).closest(":checkbox").attr("checked", checked");
  });

しかし、上記は機能していません。クリックされた行のチェックボックスを選択する簡単なアイデアはありますか？ありがとう！

jquerycheckboxhtml-table
19
Dodinas

編集：最高のソリューションAT BOTTOM

チェックボックスが1つしかない場合、tdではなくtrにイベントを添付します。

$('#my_table td').click(function(e){
  $(this).parent().find('input:checkbox:first').attr('checked', 'checked');
});

例

チェックボックスもオフにしたい場合は...

$('#my_table td').click(function(e) {
    var $tc = $(this).parent().find('input:checkbox:first'),
        tv = $tc.attr('checked');

    $tc.attr('checked', !tv);
});

この関数は、デフォルトの動作を無効にするために、チェックボックスにも適用する必要があります。

例2

編集：ソリューションが最も合理的な方法は、ターゲットが入力である場合に機能をキャンセルすることです http://jsfiddle.net/EXVYU/5/

var cbcfn = function(e) {
    if (e.target.tagName.toUpperCase() != "INPUT") {
        var $tc = $(this).parent().find('input:checkbox:first'),
            tv = $tc.attr('checked');
        $tc.attr('checked', !tv);
    }
};

$('#my_table td').live('click', cbcfn);
32
mVChr

JQuery closest（） メソッドは最も近い親を見つけます。

あなたは本当に子要素を検索したいのですが、以下を試すことができます：

 $("#my_table tr").click(function(e) { 
     $(":checkbox:eq(0)", this).attr("checked", "checked"); 
  });

基本的には、テーブル行にある最初のチェックボックスを検索しています

いくつかの参照

jQuery：eq（）セレクター

…….

4
John Hartsock
$("#my_table tr").click(function(e) {
    state= $(this).find(":checkbox:eq(0)").attr("checked");
    if (state==true){ // WITH TOGGLE
        $(this).find(":checkbox:eq(0)").removeAttr("checked");
    }else {
        $(this).find(":checkbox:eq(0)").attr("checked", "checked");
    }       
});

特定のtrの最初のチェックボックスをチェックする簡単なスクリプトを作成します。トグルについて私はこの答えを投稿する前に試してみます。

0
Joko Wandiro