<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hiddenDiv(){
var divNode = document.getElementById("dv");
divNode.style.display = "none";
}
function showDiv(){
var divNode = document.getElementById("dv");
divNode.style.display = "block";
}
function selectAll(){
var ckbs = document.getElementsByName("ckb");
for(var i=0;i<ckbs.length;i++){
ckbs[i].checked = true;
}
}
function unselectAll(){
var ckbs = document.getElementsByName("ckb");
for(var i=0;i<ckbs.length;i++){
ckbs[i].checked = false;
}
}
function reverseSelect(){
var ckbs = document.getElementsByName("ckb");
for(var i=0;i<ckbs.length;i++){
/*
if(ckbs[i].checked){
ckbs[i].checked = false;
}else{
ckbs[i].checked = true;
}
*/
ckbs[i].checked = !ckbs[i].checked;//簡單的一句話
}
}
</script>
</head>
<body>
<input type="button" value="隱藏" onclick="hiddenDiv();" />
<input type="button" value="顯示" onclick="showDiv();" />
<input type="button" value="全選" onclick="selectAll();" />
<input type="button" value="全不選" onclick="unselectAll();" />
<input type="button" value="反選" onclick="reverseSelect();" />
<hr />
<div id="dv">
<input type="checkbox" name="ckb" />
<input type="checkbox" name="ckb" />
<input type="checkbox" name="ckb" />
<input type="checkbox" name="ckb" />
<input type="checkbox" name="ckb" />
<input type="checkbox" name="ckb" />
</div>
</body>
</html>
Dom複選框操作
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章