一個挺 使用的 js 代碼片段， 判斷 復選框全選、全不選、反選、必選一個
記錄下， 搬來的
思路：
修改數據的 選中與否狀態， 拿到所有的輸入框，看是否有選中的狀態
<html>
<head>
<title>
復選框全選、全不選、反選、必選一個
</title>
<meta http-equiv="content-type" content="text/html;charset=GBK"/>
<script language="javascript">
//表單驗證
function check(){
var ids = document.getElementsByName("ids");
var flag = false ;
for(var i=0;i<ids.length;i++){
if(ids[i].checked){
flag = true ;
break ;
}
}
if(!flag){
alert("請最少選擇一項！");
return false ;
}
}
//全選
function iselect(){ //其中函數字不能為select 其為JS保留字
var ids = document.getElementsByName("ids");
var all = document.getElementById("all");
for(var i=0;i<ids.length;i++){
ids[i].checked=all.checked;
}
}
//全選
function selectAll(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=true;
}
}
//全不
function selectNone(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=false;
}
}
//反選
function selectInvert(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
if(ids[i].checked)
ids[i].checked=false ;
else
ids[i].checked=true ;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return check();">
<table border="0">
<tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
<tr><td><input type="checkbox" name="ids">音樂</td></tr>
<tr><td><input type="checkbox" name="ids">短信</td></tr>
<tr><td><input type="checkbox" name="ids">圖片</td></tr>
<tr><td><input type="checkbox" name="ids">電子書</td></tr>
<tr><td><input type="checkbox" name="ids">鈴聲</td></tr>
<tr><td><input type="checkbox" name="ids">漫畫</td></tr>
<tr><td><input type="checkbox" name="ids">游戲</td></tr>
<tr><td><input type="checkbox" name="ids">雜志</td></tr>
<tr><td><input type="checkbox" name="ids">新聞</td></tr>
<tr>
<td>
<a href="#" onclick="selectAll();">全選</a>
<a href="#" onclick="selectNone();">全不</a>
<a href="#" onclick="selectInvert();">反選</a>
</td>
</tr>
<tr><td><input type="submit" value="提交"></td></tr>
</table>
</form>
</body>
</html>
<html> <head> <title> 復選框全選、全不選、反選、必選一個 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <script language="javascript"> //表單驗證 function check(){ var ids = document.getElementsByName("ids"); var flag = false ; for(var i=0;i<ids.length;i++){ if(ids[i].checked){ flag = true ; break ; } } if(!flag){ alert("請最少選擇一項！"); return false ; } } //全選 function iselect(){ //其中函數字不能為select 其為JS保留字 var ids = document.getElementsByName("ids"); var all = document.getElementById("all"); for(var i=0;i<ids.length;i++){ ids[i].checked=all.checked; } } //全選 function selectAll(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ ids[i].checked=true; } } //全不 function selectNone(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ ids[i].checked=false; } } //反選 function selectInvert(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ if(ids[i].checked) ids[i].checked=false ; else ids[i].checked=true ; } } </script> </head> <body> <form action="#" onsubmit="return check();"> <table border="0"> <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr> <tr><td><input type="checkbox" name="ids">音樂</td></tr> <tr><td><input type="checkbox" name="ids">短信</td></tr> <tr><td><input type="checkbox" name="ids">圖片</td></tr> <tr><td><input type="checkbox" name="ids">電子書</td></tr> <tr><td><input type="checkbox" name="ids">鈴聲</td></tr> <tr><td><input type="checkbox" name="ids">漫畫</td></tr> <tr><td><input type="checkbox" name="ids">游戲</td></tr> <tr><td><input type="checkbox" name="ids">雜志</td></tr> <tr><td><input type="checkbox" name="ids">新聞</td></tr> <tr> <td> <a href="#" onclick="selectAll();">全選</a> <a href="#" onclick="selectNone();">全不</a> <a href="#" onclick="selectInvert();">反選</a> </td> </tr> <tr><td><input type="submit" value="提交"></td></tr> </table> </form> </body> </html>