纯JS实现全选与全不选

【前言】

    纯JS实现全选与全不选

 

【主体】

    第一种方法比较容易理解，但代码结构较为累赘，还多了一个变量记录状态。

全选：<input type="checkbox" name="delAll" onchange="checkAll()">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<script type="text/javascript">
    var checked1 = true;
    var checkBoxs = document.getElementsByName("del");
    if (checked1 == true) {
        for (var i = 0; i < checkBoxs.length; i++) {
	    checkBoxs[i].checked = true;
        }
        checked1 = false;
    }else{
	for (var i = 0; i < checkBoxs.length; i++) {
	    checkBoxs[i].checked = false;
	}
	checked1 = true;
    }
</script>

 

    优化：接下来对你上面代码做下优化，利用参数传参来进行代码优化

全选：<input type="checkbox" name="delAll" onchange="checkAll(this)">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<input type="checkbox" name="del">
<script type="text/javascript">
    function checkAll(me){
	var checkBoxs = document.getElementsByName("del");
	var status = me.checked;
	for (var i = 0; i < checkBoxs.length; i++) {
		checkBoxs[i].checked = status;
	}
    }
</script>

 

 

 

 

.