JavaScript案例四:全选练习

时间:2023-03-08 22:05:34

JavaScript实现全选,全不选等效果。。。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript全选练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
function chooseAll()//全选
{
var a=document.getElementsByName("box");
for(var i=0;i<a.length;i++)
{
a[i].checked=true;
}
}
function chooseNo()//全不选
{
var a=document.getElementsByName("box");
for(var i=0;i<a.length;i++)
{
a[i].checked=false;
}
}
function chooseRe()//反选
{
var a=document.getElementsByName("box");
for(var i=0;i<a.length;i++)
{
if(a[i].checked==false) a[i].checked=true;
else a[i].checked=false;
}
}
function chooseAllNo()//全选、全不选
{
var a=document.getElementsByName("box");
var b=document.getElementById("abox");
if(b.checked==true)
{
for(var i=0;i<a.length;i++)
{
a[i].checked=true;
}
}
else
{
for(var i=0;i<a.length;i++)
{
a[i].checked=false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" id="abox" onclick="chooseAllNo();">全选/全不选<br>
<input type="checkbox" name="box">张三<br>
<input type="checkbox" name="box">李四<br>
<input type="checkbox" name="box">王五<br>
<input type="checkbox" name="box">赵六<br>
<input type="button" value="全选" onclick="chooseAll();"/>
<input type="button" value="全不选" onclick="chooseNo();"/>
<input type="button" value="反选" onclick="chooseRe();"/>
</body>
</html>

运行示意:

aaarticlea/png;base64,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" alt="" />