[英]Javascript: Select all checkboxes by classname
我遇到了以下代码的问题,该代码根据单击的“全选”按钮选择行中的所有复选框。 问题是,如果已经选中某些复选框以更改其状态,则我必须单击每个按钮两次。 无论是否选中复选框,我都希望在每个按钮上单击一下即可完成此操作。 有没有简单的方法可以做到这一点? 谢谢!
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>
checked = true;
function CheckUncheckAllAndExcludeDisabledByClass(theElement,theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = checked;
}
}
checked = !checked;
}
您可以使用该演示单击一下以取消选中复选框,单击下面的链接并检查演示并集成到您的系统中。
HTML代码:
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>
jQuery代码
function check_uncheck_checkbox(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
http://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/
谢谢
您需要为每种复选框类型存储单独的状态
checked = {}; function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) { var checks = document.querySelectorAll('.' + theCheckBoxClass); var ckd = checked[theCheckBoxClass] === false ? false : true; for (var i = 0; i < checks.length; i++) { var check = checks[i]; if (!check.disabled) { check.checked = ckd; } } checked[theCheckBoxClass] = !ckd; }
<form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items."> </form>
但是如果你有jQuery,那么
$('.select-all').click(function() { var $this = $(this), checked = !$this.data('checked'); $('.' + $this.data('class')).not(':disabled').prop('checked', checked); $this.data('checked', checked) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="edit"> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="view"> </form>
您可以这样做:
HTML:
<div id="test">
<input type="checkbox" id="check1" name="check1" class="check">
<input type="checkbox" id="check01" name="check01" class="check" disabled="disabled" checked>
<input type="checkbox" id="check2" name="check2" class="check" disabled="disabled">
<input type="checkbox" id="check3" name="check3" class="check">
<input type="checkbox" id="check4" name="check4" class="check">
<input type="checkbox" id="check50" name="check50" class="check">
<input type="checkbox" id="check6" name="check6" class="check">
</div>
<input type="button" id="uncheckAll" value="select all">
JS:
$('#uncheckAll').click(function(){
var checks = $('input[class="check"]');
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (check.checked) {
check.checked = false;
}
}
}
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (!check.checked) {
check.checked = true;
}
}
}
});
这是工作中的小提琴
让我知道是否符合您的要求。
编码愉快。
尝试调整checked
变量以利用Array.prototype.filter
选择未禁用的元素, Array.prototype.every
切换元素checked
属性
function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) { var checks = document.querySelectorAll('.' + theCheckBoxClass); var checked = Array.prototype.filter.call(checks, function(el) { return !el.disabled }).every(function(el) { return el.checked }); for (var i = 0; i < checks.length; i++) { var check = checks[i]; if (!check.disabled) { check.checked = !checked ? true : false; } } }
<form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items."> </form>
问题是您对多个类名使用相同的标志:
纯Js解决方案:
var state = {}; var toggle = function(clas) { var chk = state[clas] = !state[clas];//flips the state (true/false) var chks = document.getElementsByClassName(clas); var l = chks.length; while (l--) if (!chks[l].disabled) chks[l].checked = chk; };
<form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="toggle('edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="toggle('view')" title="Select all: items."> </form>
的HTML
<div id="divCheckAll">
<input type="checkbox" name="check" id="checkall"
onClick="check(this.checked);" />Check All
</div>
<div id="divCheckboxList">
<div class="divCheckboxItem">
<input type="checkbox" name="language" value="English" />English
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" value="Hindi" />Hindi
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" value="German" />German
</div>
<div class="divCheckboxItem">
<input type="checkbox" name="language" value="Marathi" />Marathi
</div>
</div>
Java脚本
function check(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.