如何用一个按钮检查特定表格中的所有复选框

Question

我有很多动态表，每个表在输入中创建一个动态主复选框，在td 中创建几个复选框（每个都有不同的 ID）。 我们的想法是，一旦我选中或清除复选框大师，特定表选中/清除内的每个复选框。 （表中的某些复选框之前已从 DDBB 中选中或取消选中）

这是一个简单的 HTML，试图模拟我想要做的事情：

 function testing() { if ($("#masterSwitch1").prop("checked") == true) { $('table[id^="table1"]').each(function() { $('td[class^="clientAct"]').attr("checked"); $('td[class^="clientAct"]').prop("checked", true); }); } else { $('table[id^="table1"]').each(function() { $('td[class^="clientAct"]').removeAttr("checked"); $('td[class^="clientAct"]').prop("checked", false); }); } if ($("#masterSwitch2").prop("checked") == true) { $('table[id^="table2"]').each(function() { $('td[class^="clientAct"]').attr("checked"); $('td[class^="clientAct"]').prop("checked", true); }); } else { $('table[id^="table2"]').each(function() { $('td[class^="clientAct"]').removeAttr("checked"); $('td[class^="clientAct"]').prop("checked", false); }); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <input type="checkbox" onchange="testing()" id="masterSwitch1"> Try me! <table id="table1"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table> <br> <input type="checkbox" onchange="testing()" id="masterSwitch2"> Try me 2! <table id="table2"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td>Name 2</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name 2</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table>

谢谢你的帮助。 我真的很感谢你的指导。

Answer 1

这段代码是有效的，所以你可以试试这个..！

 $(".testing").on("change",function(){ var id = $(this).attr('id'); var tableID = $(this).data('id'); if($('#'+id+'').prop("checked") == true) { $('#'+tableID+'').find('.clientAct').attr("checked", true); $('#'+tableID+'').find('.clientEje').attr("checked", true); } else { $('#'+tableID+'').find('.clientAct').attr("checked", false); $('#'+tableID+'').find('.clientEje').attr("checked", false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="testing" id="masterSwitch1" data-id="table1"> Try me! <table id="table1"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table> <br> <input type="checkbox" class="testing" id="masterSwitch2" data-id="table2"> Try me 2! <table id="table2"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td>Name 2</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name 2</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table>

Answer 2

请试试这个

 $("#masterSwitch1").on("change", function(){ if($("#masterSwitch1").is(':checked')){ $('#table1 input[type=checkbox]').each(function() { var checkbox=$(this); checkbox.prop("checked",true) }); }else{ $('#table1 input[type=checkbox]').each(function() { var checkbox=$(this); checkbox.prop("checked",false) }); } }) $("#masterSwitch2").on("change", function(){ if($("#masterSwitch2").is(':checked')){ $('#table2 input[type=checkbox]').each(function() { var checkbox=$(this); checkbox.prop("checked",true) }); }else{ $('#table2 input[type=checkbox]').each(function() { var checkbox=$(this); checkbox.prop("checked",false) }); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="masterSwitch1"> Try me! <table id="table1"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table> <br> <input type="checkbox" id="masterSwitch2"> Try me 2! <table id="table2"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td>Name 2</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name 2</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table>

Answer 3

简单地你可以做如下，你需要使用each循环

您还使用 id 作为重复的id="s2" ，您应该在文档中使用唯一的 id。

 function testing() { if( $("#masterSwitch1").prop("checked") == true) { $('#table1').find('.clientAct').attr("checked", true); } else { $('#table1').find('.clientAct').attr("checked", false); } if( $("#masterSwitch2").prop("checked") == true) { $('#table2').find('.clientAct').attr("checked", true); } else { $('#table2').find('.clientAct').attr("checked", false); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" onchange="testing()" id="masterSwitch1"> Try me! <table id="table1"> <thead> <tr> <th>Table 1</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table> <br> <input type="checkbox" onchange="testing()" id="masterSwitch2"> Try me 2! <table id="table2"> <thead> <tr> <th>Table 2</th> </tr> </thead> <tbody> <tr> <td>Name 2</td> <td><input type="checkbox" class="clientAct" id="s1"></td> <td><input type="checkbox" class="clientEje" id="s2" checked></td> </tr> <tr> <td>Last Name 2</td> <td><input type="checkbox" class="clientAct" id="s3" checked></td> <td><input type="checkbox" class="clientEje" id="s4"></td> </tr> </tbody> </table>

Answer 4

这个给你：

$(document).ready(function() {
    $('input[id*="masterSwitch"]').click(function (e) {
        var isChecked = $(e.target).prop('checked');
        $(e.target).next().find('input[type=checkbox]').prop('checked', isChecked);
    });
});

或者，如果这些块（复选框和表格）被动态添加到视图中，您可以通过这种方式使用您的测试功能。
HTML：

<input type="checkbox" onclick="testing(this)" id="masterSwitch1">

JS：

function testing(checkbox) {
    var isChecked = $(checkbox).prop('checked');
    $(checkbox).next().find('input[type=checkbox]').prop('checked', isChecked);
}