Table des matières
HTML
jQuery
总结
jQuery实现的全选、反选和不选功能" >jQuery实现的全选、反选和不选功能
Maison interface Web tutoriel HTML jQuery实现的全选、反选和不选功能_html/css_WEB-ITnose

jQuery实现的全选、反选和不选功能_html/css_WEB-ITnose

Jun 24, 2016 pm 12:01 PM
jquery 全选 功能

适用于网页多选后需要进行批量操作的场景(如批量删除等)。如有问题希望大家可以指正。谢谢~~

HTML

我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮

<ul id="list">      <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>    <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>    <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>    <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>    <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>    <li><label><input type="checkbox" value="6"> 6.喜欢?</label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全选" class="btn" id="selectAll">   <input type="button" value="全不选" class="btn" id="unSelect">   <input type="button" value="反选" class="btn" id="reverse">   <input type="button" value="获得选中的所有值" class="btn" id="getValue"> 
Copier après la connexion

当然不要忘了先加载jQuery库文件:

jQuery 百度CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
Copier après la connexion

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
Copier après la connexion

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
Copier après la connexion

jQuery

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){        if(this.checked){            $("#list :checkbox").attr("checked", true);       }else{            $("#list :checkbox").attr("checked", false);     }    });  
Copier après la connexion

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () {    $("#list :checkbox,#all").attr("checked", true);   }); 
Copier après la connexion

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态。

$("#unSelect").click(function () {      $("#list :checkbox,#all").attr("checked", false);   });  
Copier après la connexion

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

$("#reverse").click(function () {      $("#list :checkbox").each(function () {           $(this).attr("checked", !$(this).attr("checked"));       });     allchk(); }); 
Copier après la connexion

上述代码中遍历了选项列表,然后改变checked属性,调用函数allchk()是干什么的,别急,留在后面介绍。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){     var valArr = new Array;     $("#list :checkbox[checked]").each(function(i){         valArr[i] = $(this).val();     });     var vals = valArr.join(',');//转换为逗号隔开的字符串     alert(vals); }); 
Copier après la connexion

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

//设置全选复选框 $("#list :checkbox").click(function(){     allchk(); }); 
Copier après la connexion

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

function allchk(){     var chknum = $("#list :checkbox").size();//选项总个数     var chk = 0;     $("#list :checkbox").each(function () {           if($(this).attr("checked")==true){             chk++;         }     });     if(chknum==chk){//全选         $("#all").attr("checked",true);     }else{//不全选         $("#all").attr("checked",false);     } } 
Copier après la connexion

总结

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

$(function () {     //全选或全不选     $("#all").click(function(){            if(this.checked){                $("#list :checkbox").attr("checked", true);           }else{                $("#list :checkbox").attr("checked", false);         }         });      //全选       $("#selectAll").click(function () {          $("#list :checkbox,#all").attr("checked", true);       });       //全不选     $("#unSelect").click(function () {            $("#list :checkbox,#all").attr("checked", false);       });       //反选      $("#reverse").click(function () {           $("#list :checkbox").each(function () {                 $(this).attr("checked", !$(this).attr("checked"));            });          allchk();     });          //设置全选复选框     $("#list :checkbox").click(function(){         allchk();     });       //获取选中选项的值     $("#getValue").click(function(){         var valArr = new Array;         $("#list :checkbox[checked]").each(function(i){             valArr[i] = $(this).val();         });         var vals = valArr.join(',');           alert(vals);     }); });  function allchk(){     var chknum = $("#list :checkbox").size();//选项总个数     var chk = 0;     $("#list :checkbox").each(function () {           if($(this).attr("checked")==true){             chk++;         }     });     if(chknum==chk){//全选         $("#all").attr("checked",true);     }else{//不全选         $("#all").attr("checked",false);     } }
Copier après la connexion

jQuery实现的全选、反选和不选功能 示例:

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>演示:jQuery实现的全选、反选和不选功能</title><style>.top_title{text-align:center;}.demo{width:520px; margin:40px auto 0 auto; min-height:250px;}ul li{line-height:30px; padding:4px 0; font-size:14px}.btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px}</style><script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script><script>  $(function () {    //全选或全不选    $("#all").click(function(){           if(this.checked){               $("#list :checkbox").attr("checked", true);          }else{               $("#list :checkbox").attr("checked", false);        }        });     //全选      $("#selectAll").click(function () {         $("#list :checkbox,#all").attr("checked", true);      });      //全不选    $("#unSelect").click(function () {           $("#list :checkbox,#all").attr("checked", false);      });      //反选     $("#reverse").click(function () {          $("#list :checkbox").each(function () {                $(this).attr("checked", !$(this).attr("checked"));           });         allchk();    });        //设置全选复选框    $("#list :checkbox").click(function(){        allchk();    });     //获取选中选项的值    $("#getValue").click(function(){        var valArr = new Array;        $("#list :checkbox[checked]").each(function(i){            valArr[i] = $(this).val();        });        var vals = valArr.join(',');          alert(vals);    });}); function allchk(){    var chknum = $("#list :checkbox").size();//选项总个数    var chk = 0;    $("#list :checkbox").each(function () {          if($(this).attr("checked")==true){            chk++;        }    });    if(chknum==chk){//全选        $("#all").attr("checked",true);    }else{//不全选        $("#all").attr("checked",false);    }}</script> </head><body><div id="main">   <h2 id="a-href-http-www-cnblogs-com-phpfensi-p-html-jQuery实现的全选-反选和不选功能-a"><a href="http://www.cnblogs.com/phpfensi/p/3853337.html ">jQuery实现的全选、反选和不选功能</a></h2>   <div class="demo">           <ul id="list">              <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>            <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>            <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>            <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>            <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>            <li><label><input type="checkbox" value="6"> 6.喜欢?</label></li>        </ul>          <input type="checkbox" id="all">        <input type="button" value="全选" class="btn" id="selectAll">          <input type="button" value="全不选" class="btn" id="unSelect">          <input type="button" value="反选" class="btn" id="reverse">          <input type="button" value="获得选中的所有值" class="btn" id="getValue">      </div></div></body></html>
Copier après la connexion

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quelles sont les fonctions de l'application Doubao ? Quelles sont les fonctions de l'application Doubao ? Mar 01, 2024 pm 10:04 PM

Quelles sont les fonctions de l'application Doubao ?

La différence entre vivox100s et x100 : comparaison des performances et analyse des fonctions La différence entre vivox100s et x100 : comparaison des performances et analyse des fonctions Mar 23, 2024 pm 10:27 PM

La différence entre vivox100s et x100 : comparaison des performances et analyse des fonctions

Qu'est-ce que Discuz ? Définition et introduction aux fonctions de Discuz Qu'est-ce que Discuz ? Définition et introduction aux fonctions de Discuz Mar 03, 2024 am 10:33 AM

Qu'est-ce que Discuz ? Définition et introduction aux fonctions de Discuz

Qu'est-ce que l'auto-média exactement ? Quelles sont ses principales caractéristiques et fonctions ? Qu'est-ce que l'auto-média exactement ? Quelles sont ses principales caractéristiques et fonctions ? Mar 21, 2024 pm 08:21 PM

Qu'est-ce que l'auto-média exactement ? Quelles sont ses principales caractéristiques et fonctions ?

Astuces PHP : implémentez rapidement la fonction de retour à la page précédente Astuces PHP : implémentez rapidement la fonction de retour à la page précédente Mar 09, 2024 am 08:21 AM

Astuces PHP : implémentez rapidement la fonction de retour à la page précédente

Quelles sont les fonctions du logiciel de gestion de compte Xiaohongshu ? Comment gérer un compte Xiaohongshu ? Quelles sont les fonctions du logiciel de gestion de compte Xiaohongshu ? Comment gérer un compte Xiaohongshu ? Mar 21, 2024 pm 04:16 PM

Quelles sont les fonctions du logiciel de gestion de compte Xiaohongshu ? Comment gérer un compte Xiaohongshu ?

Explication détaillée des fonctions et fonctions de GDM sous Linux Explication détaillée des fonctions et fonctions de GDM sous Linux Mar 01, 2024 pm 04:18 PM

Explication détaillée des fonctions et fonctions de GDM sous Linux

A quoi sert PHP ? Explorez le rôle et les fonctions de PHP A quoi sert PHP ? Explorez le rôle et les fonctions de PHP Mar 24, 2024 am 11:39 AM

A quoi sert PHP ? Explorez le rôle et les fonctions de PHP

See all articles