如何使當你點擊<tr>標記複選框

Question

嗨，大家好:)我有這個代碼，當點擊複選框時添加類「選中」我的< tr>在表中。但是如何使它在我點擊我的< tr>時也能正常工作？

<tr> 
    <td><input type="checkbox"></td> 
    <td><img src="../gallery/thumbnails/1.png" alt=""></td> 
    <td>tryb</td> 
    <td>png</td> 
</tr> 
<tr> 
    <td><input type="checkbox"></td> 
    <td><img src="../gallery/thumbnails/2.png" alt=""></td> 
    <td>test</td> 
    <td>png</td> 
</tr> 

<script type="text/javascript"> 
    $(':checkbox').change(function() { 
     $(this).parents('tr').toggleClass('selected', this.checked); 
    }).change(); 
</script> 

Answer 1

添加單擊事件tr也：

<script type="text/javascript"> 
    $(':checkbox').change(function() { 
     $(this).parents('tr').toggleClass('selected', this.checked); 
    }).change(); 

    $("tr").click(function(){ 
     if($(this).find(":checkbox").is(":checked")) 
      $(this).find(":checkbox").attr("checked",false); 
     else 
      $(this).find(":checkbox").attr("checked",true); 

     $(":checkbox").change(); 
    }); 
</script> 

Answer 2

可以跳跳虎複選框單擊事件，當tr點擊

$(':checkbox').change(function (event) { 
    $(this).parents('tr').toggleClass('selected', this.checked).addClass("checkbox"); 
}); 

// when click on tr it trigger checkbox click event 
$('tr').click(function(event) { 
    if(!$(this).is('.checkbox')) { 
    $(this).find('input[type="checkbox"]').click(); 
    } 
    $(this).removeClass('checkbox'); 
}); 

UPDATE用取巧的辦法，以防止複選框雙重效果

Answer 3

再添加一個事件偵聽器

$('tr').on('click',function(){ 
    $(this).toggleClass('selected'); 
}); 

並加e.stopPropagation()在checkbox更改處理 -

$(':checkbox').change(function (e) { 
     e.stopPropagation(); 
     $(this).parents('tr').toggleClass('selected', this.checked); 
}).change(); 

Answer 4

$('tr').click(function(){ 
    $(this).find('input[type=checkbox]').prop('checked', true); 
});