English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍点此查看DEMO演示
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
另,本文重在写全选, 鼠标划入划出背景变色为简易实现, 更加完善的请参考:
https://pt.oldtoolbag.com/article/24125.htm
原生JS版本核心代码
código 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="" />selecionar tudo/não selecionar</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />selecionar tudo/não selecionar</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');
//julgar o número de caixas de seleção selecionadas e o número real de caixas de seleção para implementar a seleção completa/estado da caixa de seleção de não seleção completa
var chk_canle = function(){
var checkedLen = 0;
//calcular o número de caixas de seleção com status de seleção na lista
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
//Verificar se o número de seleções coincidia com o número real, para determinar se foi selecionado tudo/Estado de não seleção
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
//implementação unificada de seleção total e não seleção total
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function(){
//estabelecer o estado unificado da caixa de seleção da lista com a caixa de seleção de seleção completa
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
//estabelecer o estado unificado das caixas de seleção de seleção completa
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}
//clique na caixa de seleção da lista
for (var i = 0; i < jsitems.length; i++) {
jsitems[i].onclick = function(e){
//bloquear a propagação, evitar que, ao clicar no evento de linha, a seleção direta da caixa seja inválida
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
chk_canle();
}
}
//clique dentro da linha
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function(){
//Ao clicar na linha, o estado do caixa de seleção na linha é inverso ao estado original
this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
chk_canle();
}
//Para deslizar para dentro e para fora, consulte http://mrthink.net/javascript-nomes_de_tag-destaque/
jsrows[i].onmouseover = function() {
this.className = 'hover';
}
jsrows[i].onmouseout = function() {
this.className = '';
}
}
}
código nuclear da versão do jquery
código html
<form id="jq" name="jq" action="#"> <h5>exemplo jQuery</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />selecionar tudo/não selecionar</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />seleção total baseada em jQuery/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />seleção total baseada em jQuery/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />seleção total baseada em jQuery/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />seleção total baseada em jQuery/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />seleção total baseada em jQuery/não selecionar, clicar na linha também pode marcar ou desmarcar</dd> <dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />selecionar tudo/não selecionar</label></dt> </dl> </form>
código nuclear de implementação do jquery
//jQ implementar seleção total e não seleção
$(function() {
var _jq_chk = $('#jq>dl>dt>label>:checkbox');
var _jqitems = $(':checkbox[name=jqitems]');
var _rows = $('#jq>dl>dd');
//implementação unificada de seleção total e não seleção total
_jq_chk.click(function() {
//unificar o estado da caixa de seleção na lista e da caixa de seleção de seleção total
_jqitems.add(_jq_chk).attr('checked', this.checked);
});
//evento de clique na caixa de seleção
_jqitems.click(function(e) {
//bloquear a propagação, evitar que, ao clicar no evento de linha, a seleção direta da caixa seja inválida
e.stopPropagation();
//Verificar se o número de seleções coincidia com o número real, para determinar se foi selecionado tudo/Estado de não seleção
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
});
//ao clicar em uma linha, marcar a caixa de seleção dentro da linha
_rows.bind({
mouseenter: function() {
$(this).addClass('hover');
},
mouseleave: function() {
$(this).removeClass('hover');
},
//Selecionar
click: function(){
//Ao clicar na linha, o estado do caixa de seleção na linha é inverso ao estado original
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
//Verificar se o número de seleções coincidia com o número real, para determinar se foi selecionado tudo/Estado de não seleção
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
}
});
});
Este código é significativamente maior que o código de implementação comum, principalmente para permitir que a linha seja clicada para realizar a função de seleção. Mais funções, mais código. Você pode ajustar conforme necessário.
Muitos que trabalham com web encontrarão alguns problemas JS, então, usar JQ ou JS, muitas vezes nos confunde, mas na verdade JS é genérico, enquanto JQ é construído na biblioteca carregada do JQ, então a implementação real não difere.
Declaração: O conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)