html全选反选按钮,js, jQuery实现全选、反选功能

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

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

全选

苹果

香蕉

橘子

var box = document.getElementById("box");

var lb = document.getElementById("lower");

var lber = lb.getElementsByTagName("input");

//全选，反选

box.onclick = function(){

if(this.checked){

for(var i=0;i

lber[i].checked = true;

}

}else{

for(var i=0;i

lber[i].checked = false;

}

}

}

//下面全选后，全选框才勾上

for(var i=0;i

lber[i].onclick = function(){

//引入计数器sum

var sum = 0;

for(var j=0;j

if(lber[j].checked){

sum += 1;

if(sum == lber.length){

box.checked = true;

} else {

box.checked = false;

}

}

}

}

}

jq,使用jQuery 前先引入 jq:

水果

苹果

香蕉

橘子

//给所有 .box input 元素添加 checked = ckAll 当前的状态；

//prop('checked',value) ,第一个值获取属性，第二个值：设置属性值。prop只有一个参数时，表示获取元素属性。

$('#ckAll').click(function(){

$('.box input').prop('checked',$(this).prop('checked'));

});

$('.box input').click(function(){

//each 便利每一个元素，让其执行该函数

$('.box input').each(function(){

if(!$(this).prop('checked')){

$('#ckAll').prop('checked',false);

//有一个不满足就 跳出该循环，避免执行下面

return false;

}else{

$('#ckAll').prop('checked',true);

}

})

})

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