微客导航 » 文章资讯 » js, jQuery实现全选、反选功能

js, jQuery实现全选、反选功能

2024-02-28 01:47:05 117

js，jq实现全选、反选功能：

js:思路：1.点击全选按钮实现，下面内容全选，与反选2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。








全选

苹果
香蕉
橘子

varbox=document.getElementById("box"); varlb=document.getElementById("lower"); varlber=lb.getElementsByTagName("input"); //全选，反选 box.onclick=function(){ if(this.checked){ for(vari=0;i

jq,使用jQuery前先引入jq:








水果


苹果
香蕉
橘子

//给所有.boxinput元素添加checked=ckAll当前的状态； //prop('checked',value),第一个值获取属性，第二个值：设置属性值。prop只有一个参数时，表示获取元素属性。 $('#ckAll').click(function(){ $('.boxinput').prop('checked',$(this).prop('checked')); }); $('.boxinput').click(function(){ //each便利每一个元素，让其执行该函数 $('.boxinput').each(function(){ if(!$(this).prop('checked')){ $('#ckAll').prop('checked',false); //有一个不满足就跳出该循环，避免执行下面 returnfalse; }else{ $('#ckAll').prop('checked',true); } }) })

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

js, jQuery实现全选、反选功能

热门推荐

随机推荐