English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In daily projects, the select all or deselect all feature of checkboxes is commonly used for list-type articles or data. In previous projects, I have written JavaScript for checkbox selection, but they were not organized. Recently, a brother encountered this problem, so I took some time to write versions using original JavaScript and jQuery separately. Considering the flexibility of use, it has not been encapsulated, and users need to modify the relevant parameters themselves when using it.
Function Introduction Click Here to ViewDEMO Demonstration
1. Select All/The Select All/Deselect All checkbox is implemented as a whole, i.e., the state of the checkboxes in the list is synchronized with the Select All/The state of the Select All/Deselect All checkbox is consistent with the checkboxes before it;
2. Automatically change the Select All/The state of the Select All/Deselect All checkbox, i.e., when all checkboxes in the list are selected, the Select All/Select All/Deselect All checkboxes are also selected, and vice versa;
3. Clicking on the list row can also select the checkbox within, and it will be synchronized with1,2functionality联动.
Additionally, this article focuses on the implementation of the select all feature, with the background color changing on mouse over/exit as a simple implementation. For a more comprehensive solution, please refer to:
https://de.oldtoolbag.com/article/24125.htm
Core Code of Original JavaScript Version
HTML code
<form id="js" name="js" action="#"> <h5>Original JavaScript Example</h5> <dl> <dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />Select all/No selection</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Original JavaScript Select All/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Original JavaScript Select All/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Original JavaScript Select All/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Original JavaScript Select All/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Original JavaScript Select All/No selection, you can also select or cancel by clicking on the row</dd> <dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />Select all/No selection</label></dt> </dl> </form>
Original JavaScript Code
//Original JavaScript Implementation of Select All/Deselect All Class
window.onload = function iCheckAll() {
var js_chk = document.forms['js'].chk_can;
var jsitems = document.forms['js'].jsitems;
var jsrows = document.getElementById('js').getElementsByTagName('dd');
//Überprüfung der Anzahl der ausgewählten und tatsächlichen Checkboxen für Alles auswählen/Status der Auswahlbox für Nicht alles auswählen
var chk_canle = function(){
var checkedLen = 0;
//Berechnung der Anzahl der ausgewählten Checkboxen in der Liste
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
//判断选中数量与实际数量是否相同，以确定全选/全不选状态
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
//Implementing the all-select and all-deselect together
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function(){
//Einheitlicher Status der Checkboxen in der Liste und der Auswahlboxen für Alles auswählen
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
//Einheitlicher Status der Auswahlboxen für Alles auswählen
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}
//Klick auf die Checkbox in der Liste
for (var i = 0; i < jsitems.length; i++) {
jsitems[i].onclick = function(e){
//Prevent bubble, to avoid the direct selection of the checkbox being ineffective in the row click event
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
chk_canle();
}
}
//Inhaltsklick
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function(){
//行内点击时，行内的复选框状态为原状态取反
this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
chk_canle();
}
//Bitte参阅http: für Ein- und Ausblenden//mrthink.net/javascript-Tagnamen-hervorheben/
jsrows[i].onmouseover = function() {
this.className = 'hover';
}
jsrows[i].onmouseout = function() {
this.className = '';
}
}
}
Core code of jQuery version
HTML code
<form id="jq" name="jq" action="#"> <h5>jQuery example</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />Select all/No selection</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/No selection, you can also select or cancel by clicking on the row</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/No selection, you can also select or cancel by clicking on the row</dd> <dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />Select all/No selection</label></dt> </dl> </form>
Core implementation code of jQuery
//jQ implements all-select and all-deselect
$(function() {
var _jq_chk = $('#jq>dl>dt>label>:checkbox');
var _jqitems = $(':checkbox[name=jqitems]');
var _rows = $('#jq>dl>dd');
//Implementing the all-select and all-deselect together
_jq_chk.click(function() {
//The status of the checkboxes in the list and the all-select checkbox is unified
_jqitems.add(_jq_chk).attr('checked', this.checked);
});
//Click event of the checkbox
_jqitems.click(function(e) {
//Prevent bubble, to avoid the direct selection of the checkbox being ineffective in the row click event
e.stopPropagation();
//判断选中数量与实际数量是否相同，以确定全选/全不选状态
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
});
//Selecting a row selects the checkbox within it
_rows.bind({
mouseenter: function() {
$(this).addClass('hover');
,
mouseleave: function() {
$(this).removeClass('hover');
,
//Auswahl
click: function(){
//行内点击时，行内的复选框状态为原状态取反
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
//判断选中数量与实际数量是否相同，以确定全选/全不选状态
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
}
});
});
这段代码比普通实现代码要多不少，主要表现为点击行就可以实现选择功能。更多的功能需要更多的代码。大家可以根据需要自行删减。
相信很多从事web开发的人都会遇到一些JS问题，到底是使用JQ实现还是使用JS实现，这常常困扰着我们，但其实JS是通用的，而JQ是建立在它自己加载的JQ库上的，所以在实际实现上没有任何区别。
声明：本文内容来自网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未进行人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）