checkbox 全选操作

时间:2023-03-09 07:09:48
checkbox 全选操作
 <html>
<head></head>
<body>
<div id="places">
<input type="checkbox" name="chx" value="1" onclick="_check_status(this)"/>香港
<input type="checkbox" name="chx" value="2" onclick="_check_status(this)"/>澳门
<input type="checkbox" name="chx" value="3" onclick="_check_status(this)"/>深圳
<input type="checkbox" name="chx" value="4" onclick="_check_status(this)"/>台北
<input type="checkbox" name="chx" value="5" onclick="_check_status(this)"/>乌镇
</div> <div id="allplaces">
<input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选
</div>
</body>
<script>
//点击“全选”, 所有地方都选上
function _check_all(obj)
{
var nodes = document.getElementById("places").childNodes;
if(obj.checked)
{
for (var i=0; i < nodes.length; i++)
{
if(nodes[i].type == "checkbox")
{
nodes[i].checked = true;
}
}
}
else
{
for (var i=0; i < nodes.length; i++)
{
if(nodes[i].type == "checkbox")
{
nodes[i].checked = false;
}
}
}
} //每一个checkbox的状态校验
function _check_status(obj)
{
var nodes = document.getElementById("places").childNodes;
if(obj.checked)
{
for (var i=0; i < nodes.length; i++)
{
if((nodes[i].type == "checkbox") && !nodes[i].checked)
{
document.getElementById("checkall").checked = false;
return;
}
} document.getElementById("checkall").checked = true;
}
else
{
document.getElementById("checkall").checked = false;
}
} </script>
</html>