を選択し、チェックボックスのjQuery

Question

にをクリックしたときに

I次のHTMLコードをしました：私は<tr>をクリックした場合は、この<tr>がにあるチェックボックスを得た場合にのみ、jQueryを使って私は、チェックボックスをチェックすることができますどのように

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Color</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="checkbox checkbox-primary"> 
        <input type="checkbox" name="elements_ids"> 
        <label></label> 
       </div> 
      </td> 
      <td>Blue</td> 
     </tr> 
     ... 
    </tbody> 
</table> 

チェック。私はこのコードが自分のページのすべてのテーブルに影響を与えないようにします。

私が試した：チェックボックスがチェックされている場合

$(".table tbody tr").has(':checkbox').change(function(e){ 
    alert('ee'); 
}); 

はまた、どのように私はこれを元に戻すことができますか？

助けてください。

Answer 1

クリックイベントでtrのチェックボックスを探し、prop()という方法でチェックボックスステータスを次のように設定します。

$(".table tbody tr").click(function(e) { 
 
    if($(e.target).is(':checkbox')) return; //ignore when click on the checkbox 
 
    
 
    var $cb = $(this).find(':checkbox'); 
 
    $cb.prop('checked', !$cb.is(':checked')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th>Color</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <div class="checkbox checkbox-primary"> 
 
        <input type="checkbox" name="elements_ids"> 
 
        <label></label> 
 
       </div> 
 
      </td> 
 
      <td>Blue</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

jsfiddle

そして、あなたが必要なもののためのjavascriptがあります：

$("tr").on("click", function(e){ 
    $("input[type='checkbox']", this).each(function() { 
     $(this).attr('checked', !$(this).attr('checked')); 
    }); 
}); 

それがクリックされた行のすべてのチェックボックスを反転します。この方法では。