复选框全选、不选切换

复选框全选与不选切换的JavaScript实现

最新推荐文章于 2025-08-03 12:14:23 发布

原创最新推荐文章于 2025-08-03 12:14:23 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

js代码：

//复选框全选、不选切换
function checkChg(allId,subName) {
    var subIds = document.getElementsByName(subName);
    //全选
	if(document.getElementById(allId).checked==true){
	    for (var j = 0; j < subIds.length; j++) {
	        if (subIds.item(j).checked == false) {
	        	subIds.item(j).checked = true;
	        }
	    }
	}else{//全不选
	    for (var j = 0; j < subIds.length; j++) {
	        if (subIds.item(j).checked == true) {
	        	subIds.item(j).checked = false;
	        }
	    }
	}

}

HTML调用：

  	<input type="checkbox" name="all" id="all" onclick="checkChg('all','checkbox')" />
    <input name="test" value="复选框1" type="checkbox" />复选框1<br />
    <input name="test" value="复选框2" type="checkbox" />复选框2<br />
    <input name="test" value="复选框3" type="checkbox" />复选框3<br />
    <input name="test" value="复选框4" type="checkbox" />复选框4<br />
    <input name="test" value="复选框5" type="checkbox" />复选框5<br />
    <input name="test" value="复选框6" type="checkbox" />复选框6<br />