<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全選，反選按鈕</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */
var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = true;
}
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = true;
};
//全不選按鈕
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = false;
}
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = false;
};
//反選 也要判斷是否都需要全部選中
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
checkedAllBox.checked = true;
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = !items[i].checked;
if(!items[i].checked){
//一旦進入判斷，則證明不是全選狀態
//將checkedAllBox設置為沒選中狀態
checkedAllBox.checked = false;
}
}
};
//提交按鈕
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍歷 items
for(var i=0; i<items.length;i++)
{
//判斷多選框是否選中
if(items[i].checked){
alert(items[i].value);
}
}
};
checkedAllBox.onclick = function(){
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
items[i].checked = this.checked;
}
};
//items
//如果四個多選框全都選中，則checkedAllBox也應該選中
//如果四個多選框都沒選中，則checkedAllBox也應該沒選中
var items = document.getElementsByName('items');
//為四個多選框分別綁定點擊響應函數
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//判斷四個多選框是否全選
//只要有一個沒選中則就不是全選
if(!items[j].checked){
//一旦進入判斷，則證明不是全選狀態
//將checkedAllBox設置為沒選中狀態
checkedAllBox.checked = false;
//一旦進入判斷，則已經得出結果，不用再繼續執行循環
break;
}
}
};
}
}
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 選" />
<input type="button" id="checkedNoBtn" value="全不選" />
<input type="button" id="checkedRevBtn" value="反 選" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全選，反選按鈕</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */
var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = true;
}
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = true;
};
//全不選按鈕
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = false;
}
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = false;
};
//反選 也要判斷是否都需要全部選中
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//獲取四個多選框items
var items = document.getElementsByName('items');
checkedAllBox.checked = true;
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
//通過多選框的checked屬性可獲取或設置選中狀態
items[i].checked = !items[i].checked;
if(!items[i].checked){
//一旦進入判斷，則證明不是全選狀態
//將checkedAllBox設置為沒選中狀態
checkedAllBox.checked = false;
}
}
};
//提交按鈕
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍歷 items
for(var i=0; i<items.length;i++)
{
//判斷多選框是否選中
if(items[i].checked){
alert(items[i].value);
}
}
};
checkedAllBox.onclick = function(){
var items = document.getElementsByName('items');
//遍歷items
for(var i=0;i<items.length;i++)
{
//設置四個多選框變成選中狀態
items[i].checked = this.checked;
}
};
//items
//如果四個多選框全都選中，則checkedAllBox也應該選中
//如果四個多選框都沒選中，則checkedAllBox也應該沒選中
var items = document.getElementsByName('items');
//為四個多選框分別綁定點擊響應函數
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){
//將checkedAllBox設置為選中狀態
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//判斷四個多選框是否全選
//只要有一個沒選中則就不是全選
if(!items[j].checked){
//一旦進入判斷，則證明不是全選狀態
//將checkedAllBox設置為沒選中狀態
checkedAllBox.checked = false;
//一旦進入判斷，則已經得出結果，不用再繼續執行循環
break;
}
}
};
}
}
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 選" />
<input type="button" id="checkedNoBtn" value="全不選" />
<input type="button" id="checkedRevBtn" value="反 選" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>