English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍点此查看DEMO演示
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
另,本文重在写全选, 鼠标划入划出背景变色为简易实现, 更加完善的请参考:
https://es.oldtoolbag.com/article/24125.htm
原生JS版本核心代码
html代码
<form id="js" name="js" action="#"> <h5>原生JS样例</h5> <dl> <dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全选/全不选</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选，点击行也可以选中或取消</dd> <dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全选/全不选</label></dt> </dl> </form>
原生js代码
//原生JS实现全选全不选类
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');
//juzgar el número de casillas seleccionadas y el número real de casillas para realizar la selección completa/estado de casilla de selección de nada
var chk_canle = function(){
var checkedLen = 0;
//calcular el número de casillas seleccionadas en la lista
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
//Determinar si el número seleccionado es el mismo que el número real, para determinar la selección completa/Estado de no selección completa
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
//全选与全不选一体实现
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function(){
//estado unificado de casillas de selección en la lista y casillas de selección completa
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
//estado unificado de casillas de selección completa
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}
//clic en casilla de la lista
for (var i = 0; i < jsitems.length; i++) {
jsitems[i].onclick = function(e){
//阻止冒泡，避免在行点击事件中直接选择复选框无效
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
chk_canle();
}
}
//clic en línea
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function(){
//Al hacer clic en línea, el estado del cuadro de verificación de línea es inverso al estado original
this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
chk_canle();
}
//Consulte http: para insertar y quitar//mrthink.net/javascript-nombres_de_etiqueta-resaltar/
jsrows[i].onmouseover = function() {
this.className = 'hover';
}
jsrows[i].onmouseout = function() {
this.className = '';
}
}
}
jQuery版本核心代码
html代码
<form id="jq" name="jq" action="#"> <h5>jQuery示例</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />全选/全不选</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选，点击行也可以选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选，点击行也可以选中或取消</dd> <dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />全选/全不选</label></dt> </dl> </form>
jQuery核心实现代码
//jQ实现全选全不选
$(function() {
var _jq_chk = $('#jq>dl>dt>label>:checkbox');
var _jqitems = $(':checkbox[name=jqitems]');
var _rows = $('#jq>dl>dd');
//全选与全不选一体实现
_jq_chk.click(function() {
//列表中的复选框和全选复选框统一状态
_jqitems.add(_jq_chk).attr('checked', this.checked);
});
//复选框的点击事件
_jqitems.click(function(e) {
//阻止冒泡，避免在行点击事件中直接选择复选框无效
e.stopPropagation();
//Determinar si el número seleccionado es el mismo que el número real, para determinar la selección completa/Estado de no selección completa
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
});
//选择行时选中行内的复选框
_rows.bind({
mouseenter: function() {
$(this).addClass('hover');
,
mouseleave: function() {
$(this).removeClass('hover');
,
//Selección
click: function(){
//Al hacer clic en línea, el estado del cuadro de verificación de línea es inverso al estado original
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
//Determinar si el número seleccionado es el mismo que el número real, para determinar la selección completa/Estado de no selección completa
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
}
});
});
Este código es mucho más largo que el código de implementación común, principalmente se puede lograr la función de selección al hacer clic en la fila. Más funciones, más código. Puede ajustar según sea necesario.
Crees que muchas personas que hacen web se encontrarán con algunos problemas de JS, ¿usar JQ o JS, a menudo nos preocupa, pero en realidad JS es universal, mientras que JQ se construye en la biblioteca de JQ que carga, por lo que la implementación real no tiene diferencia alguna.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.