English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍点此查看DEMO演示
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
另,本文重在写全选, 鼠标划入划出背景变色为简易实现, 更加完善的请参考:
https://fr.oldtoolbag.com/article/24125.htm
原生JS版本核心代码
Code 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="" />Sélectionner tout/Désélectionner tout</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />Sélectionner tout/Désélectionner tout</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');
//Juger du nombre de cases sélectionnées par rapport au nombre total de cases pour réaliser la sélection complète/États de la case à cocher de désélection complète
var chk_canle = function(){
var checkedLen = 0;
//Calculer le nombre de cases à cocher sélectionnées dans la liste
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
//Comparez le nombre de sélectionnés avec le nombre réel pour déterminer la sélection complète/États de non sélection
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
//Mise en œuvre intégrée de la sélection complète et de la non-sélection complète
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function(){
//Uniformiser l'état des cases à cocher de la liste avec la case à cocher de sélection complète
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
//Uniformiser l'état des cases à cocher de sélection complète
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}
//Cliquez sur la case à cocher de la liste
for (var i = 0; i < jsitems.length; i++) {
jsitems[i].onclick = function(e){
//Empêcher le débordement, éviter que le clic sur la ligne ne sélectionne directement la case à cocher
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
chk_canle();
}
}
//Cliquez en ligne
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function(){
//Lors du clic sur une ligne, l'état de la case à cocher dans la ligne est inversé par rapport à l'état initial
this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
chk_canle();
}
//Pour insérer ou supprimer, veuillez consulter http://mrthink.net/javascript-tagnames-highlight/
jsrows[i].onmouseover = function() {
this.className = 'hover';
}
jsrows[i].onmouseout = function() {
this.className = '';
}
}
}
Code principal de jQuery
Code HTML
<form id="jq" name="jq" action="#"> <h5>Exemple jQuery</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />Sélectionner tout/Désélectionner tout</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Sélection complète basée sur jQuery/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Sélection complète basée sur jQuery/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Sélection complète basée sur jQuery/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Sélection complète basée sur jQuery/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Sélection complète basée sur jQuery/Désélectionner tout, cliquez sur la ligne pour sélectionner ou annuler/dd> <dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />Sélectionner tout/Désélectionner tout</label></dt> </dl> </form>
Code principal de la implémentation de jQuery
//jQ pour la sélection complète et non complète
$(function() {
var _jq_chk = $('#jq>dl>dt>label>:checkbox');
var _jqitems = $(':checkbox[name=jqitems]');
var _rows = $('#jq>dl>dd');
//Mise en œuvre intégrée de la sélection complète et de la non-sélection complète
_jq_chk.click(function() {
//Unification de l'état entre les cases à cocher de la liste et la case à cocher de sélection complète
_jqitems.add(_jq_chk).attr('checked', this.checked);
});
//Événement de clic sur la case à cocher
_jqitems.click(function(e) {
//Empêcher le débordement, éviter que le clic sur la ligne ne sélectionne directement la case à cocher
e.stopPropagation();
//Comparez le nombre de sélectionnés avec le nombre réel pour déterminer la sélection complète/États de non sélection
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
});
//Sélectionnez la ligne pour cocher la case à cocher à l'intérieur de la ligne
_rows.bind({
mouseenter: function() {
$(this).addClass('hover');
,
mouseleave: function() {
$(this).removeClass('hover');
,
//Sélection
click: function(){
//Lors du clic sur une ligne, l'état de la case à cocher dans la ligne est inversé par rapport à l'état initial
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
//Comparez le nombre de sélectionnés avec le nombre réel pour déterminer la sélection complète/États de non sélection
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
}
});
});
Ce code est beaucoup plus long que la mise en œuvre ordinaire, principalement en cliquant sur une ligne pour activer la fonction de sélection. Plus de fonctionnalités, plus de code. Vous pouvez supprimer ou ajouter selon vos besoins.
Beaucoup de gens qui font du web rencontrent souvent des problèmes JS, que ce soit JQ ou JS, cela nous rend souvent confus, mais en réalité JS est universel, tandis que JQ est construit sur sa propre bibliothèque de JQ, donc en réalité il n'y a aucune différence.
Déclaration : Le contenu de cet article est hébergé sur Internet, la propriété intellectuelle appartient aux auteurs, le contenu est fourni par les utilisateurs d'Internet de manière volontaire et auto-traduit, ce site n'possède pas de propriété intellectuelle, n'a pas été édité par l'homme, ni assume la responsabilité des responsabilités juridiques pertinentes. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)