检查所有复选框
我在创建一些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, e.g. wales, etc
$(".checkall").on('change', function() {
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "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>
如果我不是错了你想说这个代码应工作。我已经完成了第一组复选框。您可以为未来两年做:
$("#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>
UPDATE
这将满足您的要求。删除您$( “输入[类型= '复选框']”)。变化(函数()代码,并使用更新后的一个
$("#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, e.g. "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项目,如果你删除项目3第一威尔士doent删除 –
啊这么接近,当你删除一个项目时,他们都检查它不删除检查所有.. http:// jsbin。 com/xiqemiqadu /编辑?html,js,输出 –
现在它不会在检查时显示所有项目,但是再次运行其他项目 –
不知道你的意思是“渡过难关”,但取消办理登机手续都可以通过实现:
if (!$currentCheckbox.hasClass('checkall')) {
var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
if ($previousCheckAll.length>0)
{
$previousCheckAll.first().prop('checked',false);
}
}
只需插入上面的代码行
$("#checked").empty();
您JSbin的
之下。
你能解释清楚吗? – void