本文主要是介绍JS实现全选、全不选的email效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div><input type="checkbox" id="checkAll"/>全选/全不选</div><ul><li><input type="checkbox" class="cb" /> 1......</li><li><input type="checkbox" class="cb" /> 2......</li><li><input type="checkbox" class="cb" /> 3......</li><li><input type="checkbox" class="cb" /> 4......</li><li><input type="checkbox" class="cb" /> 5......</li></ul></body><script>// 依据标签的class属性获取标签对象,这个能精确定位var inputs = document.getElementsByClassName('cb');var checkAll=document.getElementById('checkAll');/** 匿名函数只针对checkAll的点击事件*/// 全选、全不选checkAll.onclick = function(){for (var i=0;i<inputs.length;i++){inputs[i].checked = this.checked;// 1. 自己是否被选上// this,指的是当前的标签,在这里指的是<input type="checkbox" id="checkAll"/>// 2. 如果被选上把其它的也勾选上// 3. 否则其它的也不勾选}};for(var i=0;i<inputs.length;i++){inputs[i].onclick=function(){if(!this.checked){// 当 inputs有一个不选时,checkAll不选checkAll.checked=false;} // 当inputs全选时,checkAll选中var status = true;for (var j=0;j<inputs.length;j++){if (inputs[j].checked == false){status = false;break;}}checkAll.checked = status;}} </script>
</html>
当inputs全选时,checkAll选中,也可以写成这样。
checkAll.checked = true;for (var j=0;j<inputs.length;j++){if (inputs[j].checked == false){checkAll.checked = false;break;}}
这篇关于JS实现全选、全不选的email效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!