选中所有复选框
[英]check all check boxes
问题描述
我创建的某些JavaScript出现问题。 当“全部选中”中的一项为“未选中”时，它需要从“全部选中”框中删除选中的项，同样，当“全部选中”时，我也不想仅通过“全部选中”框来拉出其他项。
check all, item 1, item 2
删除项目1并选中所有未选中的项目，所有经过检查的项目都是项目。 如果选中“全部检查”，则检查项目1和项目2，但不进行检查。
// all "check all" checkboxes will have the class "checkall" // and the id to match the location, eg wales, etc $(".checkall").on('change', function() { // all normal checkboxes will have a class "chk_xxxxxx" // where "xxxx" is the name of the location, eg "chk_wales" // get the class name from the id of the "check all" box var checkboxesClass = '.chk_' + $(this).attr("id"); // now get all boxes to check var boxesToCheck = $(checkboxesClass); // check all the boxes boxesToCheck.prop('checked', this.checked); }); // display what the user has chosen $("input[type='checkbox']").change(function() { $("#checked").empty(); $("input[type='checkbox']:checked").each(function() { // see if it is a "check all" box if ($(this).attr("class") === "checkall") { // Display the id of the "check all" box $("#checked").html($("#checked").html() + '<h3>' + $(this).attr("id").toUpperCase() + "</h3>"); } else { // display the label text for all normal checkboxes $("#checked").html($("#checked").html() + $(this).next().text() + "<br>"); } }); }); // With some more work you could make the Check All headings show when only one or two checkboxes were checked. It depends how you need it to work.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="wales" class="checkall" value="1"> <label for="wales">Check All</label> <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> <label for="checkItem1">Item 1</label> <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> <label for="checkItem2">Item 2</label> <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> <label for="checkItem3">Item 3</label> <hr /> <input type="checkbox" id="west" class="checkall" value="3"> <label for="west">Check All</label> <input type="checkbox" id="checkItem4" value="4" class="chk_west"> <label for="checkItem4">Item 1</label> <input type="checkbox" id="checkItem5" value="4" class="chk_west"> <label for="checkItem5">Item 2</label> <input type="checkbox" id="checkItem6" value="4" class="chk_west"> <label for="checkItem6">Item 3</label> <hr /> <input type="checkbox" id="east" class="checkall" value="5"> <label for="east">Check All</label> <input type="checkbox" id="checkItem7" value="6" class="chk_east"> <label for="checkItem7">Item 1</label> <input type="checkbox" id="checkItem8" value="6" class="chk_east"> <label for="checkItem8">Item 2</label> <input type="checkbox" id="checkItem9" value="6" class="chk_east"> <label for="checkItem9">Item 3</label> <p>You have selected:</p> <div id="checked"> </div> </body> </html>
2 个解决方案
解决方案1
0 2015-12-21 09:36:11
如果我没有弄错您要说的话，此代码应该可以工作。 我已经完成了第一组复选框。 您可以为接下来的两个步骤做：
$("#check1 input[type=checkbox]").on("change", function() { if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) { $("#wales").prop("checked",true); } else { $("#wales").prop("checked",false); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="wales" class="checkall" value="1"> <label for="wales">Check All</label> <section id="check1"> <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> <label for="checkItem1">Item 1</label> <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> <label for="checkItem2">Item 2</label> <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> <label for="checkItem3">Item 3</label> </section>
更新
这将满足您的要求。 删除您的$（“ input [type ='checkbox']”）。change（function（）代码并使用更新的代码
$("#check1 input[type=checkbox]").on("change", function() { $("#checked").empty(); if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) { $("#wales").prop("checked", true); // Display the id of the "check all" box $("#checked").html($("#checked").html() + "<h3>Wales</h3>"); } else { $("#wales").prop("checked", false); $("#check1 input[type=checkbox]:checked").each(function() { $("#checked").html($("#checked").html() + $(this).next().text() + "<br>"); }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="wales" class="checkall" value="1"> <label for="wales">Check All</label> <section id="check1"> <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> <label for="checkItem1">Item 1</label> <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> <label for="checkItem2">Item 2</label> <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> <label for="checkItem3">Item 3</label> </section> <hr/> <div id="checked"> </div>
另一个更新
$(".checkall").on('change', function() { // all normal checkboxes will have a class "chk_xxxxxx" // where "xxxx" is the name of the location, eg "chk_wales" // get the class name from the id of the "check all" box var checkboxesClass = '.chk_' + $(this).attr("id"); // now get all boxes to check var boxesToCheck = $(checkboxesClass); // check all the boxes boxesToCheck.prop('checked', this.checked); }); $("#check1 input[type=checkbox], #wales").on("change", function() { checkBoxes(); }); function checkBoxes() { $("#checked").empty(); if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) { $("#wales").prop("checked", true); // Display the id of the "check all" box $("#checked").html($("#checked").html() + "<h3>Wales</h3>"); } else { $("#wales").prop("checked", false); $("#check1 input[type=checkbox]:checked").each(function() { $("#checked").html($("#checked").html() + $(this).next().text() + "<br>"); }); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="wales" class="checkall" value="1"> <label for="wales">Check All</label> <section id="check1"> <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> <label for="checkItem1">Item 1</label> <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> <label for="checkItem2">Item 2</label> <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> <label for="checkItem3">Item 3</label> </section> <hr/> <div id="checked"> </div>
解决方案2
0 2015-12-21 10:03:01
不确定“拉穿”是什么意思，但是可以通过以下方法取消选中全部复选框：
if (!$currentCheckbox.hasClass('checkall')) {
var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
if ($previousCheckAll.length>0)
{
$previousCheckAll.first().prop('checked',false);
}
}
只需将代码插入行下方
$("#checked").empty();
您的JSbin。
复选框全部单击
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.