Javascript 如何选中和取消选中 div 中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29114451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check and uncheck all checkboxes inside a div
提问by jones
I want to uncheck all checkboxex inside the 'test' div without those checkboxes whose attributes are disabled.
我想取消选中“测试”div 中的所有复选框，而不选中那些属性被禁用的复选框。
<div id="test">
<input type="checkbox" id="check1" name="check1">
<input type="checkbox" id="check01" name="check01" disabled="disabled">
<input type="checkbox" id="check2" name="check2" disabled="disabled">
<input type="checkbox" id="check3" name="check3">
<input type="checkbox" id="check4" name="check4">
<input type="checkbox" id="check50" name="check50">
<input type="checkbox" id="check6" name="check6">
</div>
<input type="button" id="uncheckAll" onclick="uncheckAll('test')">
<script language="javascript">
function uncheckAll() {
$('#' + divid + ' :checkbox').attr('checked', false);
/*
This function uncheck all of the checkboxes, which i don't want, i want to
uncheck only checkboxes whose attributes are not disabled.
/*
}*/
</script>
回答by Arun P Johny
You need to accept the param named divId then use :enabled filterto filter out disabled checkboxes
您需要接受名为 divId 的参数，然后使用:enabled 过滤器过滤掉禁用的复选框
function uncheckAll(divid) {
$('#' + divid + ' :checkbox:enabled').prop('checked', false);
}
Demo: Fiddle
演示：小提琴
If no jQuery
如果没有 jQuery
function uncheckAll(divid) {
var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
check.checked = false;
}
}
}
Demo: Fiddle
演示：小提琴
回答by Tushar Kulkarni
You can take a common class to each input. Try this
您可以为每个输入采用一个公共类。尝试这个
<div id="test">
<input type="checkbox" id="check1" class="check" name="check1">
<input type="checkbox" id="check01" class="check" name="check01" disabled="disabled">
<input type="checkbox" id="check2" class="check" name="check2" disabled="disabled">
<input type="checkbox" id="check3" class="check" name="check3">
<input type="checkbox" id="check4" class="check" name="check4">
<input type="checkbox" id="check50" class="check" name="check50">
<input type="checkbox" id="check6" class="check" name="check6">
</div>
<input type="button" id="uncheckAll" onclick="uncheckAll()">
<script language="javascript">
function uncheckAll()
{
$("input.check").each(function(){
if($(this).prop('disabled')!=true)
{
$(this).attr('checked',false);
}
});
}
</script>
回答by Puneet
Following Single line jQuery code will do your work.
以下单行 jQuery 代码将完成您的工作。
function uncheckAll(divid) {
$('#' + divid + ' :checkbox:not([disabled])').attr('checked', false);
}
回答by Victor Mendon?a Nogueira
Simplest solution ever:
有史以来最简单的解决方案：
// index.html create this in <body>:
// index.html 在<body>:
<button type="button" id="desativar-tudo">Uncheck All</button>
<button type="button" id="ativar-tudo">Check All</button>
// after that create this:
// 之后创建这个：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function uncheckAll() {$('input').prop('checked', false);}
function CheckAll(){$('input').prop('checked', true);}
$('#desativar-tudo').click(uncheckAll);
$('#ativar-tudo').click(CheckAll);
</script>
