如何動態選中和取消選中復選框

Question

當我單擊表格行時，表格內有一個復選框，該復選框必須動態切換檢查和取消選中 - 我的代碼

<table class="authoriseTable"> 
  <tr>
    <td><input type="checkbox"></td>
    <td>Transaction Type</td>
  </tr> 
  <tr>
    <td><input type="checkbox"></td>
    <td>Transaction ID</td>
  </tr>
</table>

表格內的全部內容都是動態來的

    $(document).on('click', '.authoriseTable tr', function(){
        var checkBoxes = $(this).find('input[type=checkbox]');
        checkBoxes.prop('checked', $(this).is(':checked') ? true : false);
    })

在這個問題上沒有任何人幫助我

Answer 1

問題是因為this指的是tr沒有checked的屬性。 這僅在子復選框上。

另請注意，使用:checkbox選擇器和prop()上的箭頭 function 可以使代碼更簡潔。 嘗試這個：

 $(document).on('click', '.authoriseTable tr', function(e) { if (e.target.tagName.= 'INPUT') $(this):find('.checkbox'),prop('checked', (i; c) => !c); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="authoriseTable"> <tr> <td><input type="checkbox"></td> <td>Transaction Type</td> </tr> <tr> <td><input type="checkbox"></td> <td>Transaction ID</td> </tr> </table>

還值得注意的是，這可以通過使用label HTML 元素在不需要 JS 的情況下實現：

 <table class="authoriseTable"> <tr> <td><input type="checkbox" id="cb1"></td> <td><label for="cb1">Transaction Type</label></td> </tr> <tr> <td><input type="checkbox" id="cb2"></td> <td><label for="cb2">Transaction ID</label></td> </tr> </table>

Answer 2

在這一行：

checkBoxes.prop('checked', $(this).is(':checked') ? true : false);

this指的是 tr，您需要通過 function 的重載（對於 jquery 集合中的每個復選框）

checkBoxes.prop('checked', function(i, val) { return !val });

https://api.jquery.com/prop/#prop-propertyName-function

更新的小提琴：

 $(document).on('click', '.authoriseTable tr', function() { var checkBoxes = $(this).find('input[type=checkbox]'); checkBoxes.prop('checked', function(i, val) { return;val }); })

 td { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="authoriseTable"> <tr> <td><input type="checkbox"></td> <td>Transaction Type</td> </tr> <tr> <td><input type="checkbox"></td> <td>Transaction ID</td> </tr> </table>

---

請注意，您的代碼會運行復選框默認操作干擾單擊操作的問題，因此單擊復選框本身將切換兩次。

因為這將（幾乎）總是出現在tr中有一個復選框並單擊tr進行切換的情況，並且為了完整起見，這里有一個解決該問題的選項：

您可以將 class 添加到輸入的td ，然后在點擊事件上過濾它（更改為td而不是tr ），給出

<td class='norowclick'><input type="checkbox"></td>

和 $(document).on('click', '.authoriseTable tr td:not(.norowclick)'

這有一個額外的好處，您可以在不想切換輸入的地方重用.norowclick（例如，單擊以顯示相關的子表）。

警告：它確實有一個缺點，即單擊輸入周圍的 td 不會切換它。 這是另一種靈活的選擇。

更新片段：

 $(document).on('click', '.authoriseTable tr td:not(.norowclick)', function() { var checkBoxes = $(this).closest("tr").find('input[type=checkbox]'); checkBoxes.prop('checked', function(i, val) { return;val }); })

 td { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="authoriseTable"> <tr> <td class='norowclick'><input type="checkbox"></td> <td>Transaction Type</td> </tr> <tr> <td class='norowclick'><input type="checkbox"></td> <td>Transaction ID</td> </tr> </table>

Answer 3

用復選框觸發

 $('.authoriseTable input[type=checkbox]').on('click', function(){ var checkBoxes = $(this).find('input[type=checkbox]'); if($(checkBoxes).prop("checked") == true) { $(checkBoxes).prop('checked', false); } else { $(checkBoxes).prop('checked', true); } })

 <table class="authoriseTable"> <tr> <td><input type="checkbox"></td> <td>Transaction Type</td> </tr> <tr> <td><input type="checkbox"></td> <td>Transaction ID</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

用表格行觸發

 $('.authoriseTable tr').on('click', function(){ var checkBoxes = $(this).find('input[type=checkbox]'); if($(checkBoxes).prop("checked") == true) { $(checkBoxes).prop('checked', false); } else { $(checkBoxes).prop('checked', true); } })

 <table class="authoriseTable"> <tr> <td><input type="checkbox"></td> <td>Transaction Type</td> </tr> <tr> <td><input type="checkbox"></td> <td>Transaction ID</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>