js实现复选框全选和反选功能

最新推荐文章于 2026-04-01 02:41:15 发布

原创最新推荐文章于 2026-04-01 02:41:15 发布 · 528 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个简单的网页实现，包含全选和反选功能，适用于网页表单中多个复选框的选择操作。

自己做的一个简单的全选反选实现

<!DOCTYPE html>

<html>
<head>

</head>
<body>

<form>


<input type="checkbox" id="ckall" onclick="checkall('tt1')">全选<br/>
<input type="checkbox" id="rkall" onclick="reservecheck('tt1')">反选reserve<br/>

<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
<input type="checkbox" id="check1" name="tt1">Do you like summer?<br/>
</form>


<button onclick="uncheck()">Uncheck Checkbox</button>

<script>
/*全选函数实现*/
function checkall(id){
var checkall = document.getElementById("ckall");
if(checkall.checked==true)akall(id);
else cancelallchecked(id);
}
/*取消全选，所有项都不选中的实现*/
function cancelallchecked(id){
cancel(id);
}

function akall(id){

var getall = document.getElementsByName(id);
if(getall.length>0){
var i=0;
for(i;i<getall.length;i++){
getall[i].checked=true;
}
}
}

function cancel(id){

var getall = document.getElementsByName(id);
if(getall.length>0){
var i=0;
for(i;i<getall.length;i++){
getall[i].checked=false;
}
}
}

function checkallr(id){
var checkall = document.getElementById("rkall");
if(checkall.checked==true)reservecheck(id);
else cancelreserve(id);
}

/*反选的实现*/
function reservecheck(id){
var getall = document.getElementsByName(id);
if(getall.length>0){
var i=0;
for(i;i<getall.length;i++){

if(getall[i].checked==true){
getall[i].checked=false;
}else{
getall[i].checked=true;
}
}
}
}

function uncheck(){
document.getElementById("check1").checked=true;
}
</script>

</body>
</html>