覆選框全選/全部選 ~~~javascript 你愛好的運動是什麼？全選/全不選 足球 籃球 羽毛球 乒乓球 ~~~ 你愛好的運動是什麼？全選/全不選 足球 籃球 羽毛球 乒乓球 ...
覆選框全選/全部選
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
/*
全選按鈕點擊按鈕以後，四個多選框全部被選中
*/
// 為idcheckedAllBtn的按鈕綁定一個單擊相應函數
var item = document.getElementsByName('items');
var checkedAllBtn = document.getElementById('checkedAllBtn');
checkedAllBtn.onclick = function() {
//獲取四個多選框items
// 遍歷items
for (var i = 0; i < item.length; i++) {
// 設置四個多選框變成選中狀態
// 通過多選框的checked屬性可以來獲取或者設置覆選框是否被選中
item[i].checked = true;
}
}
// 為checkedNoBtn的按鈕綁定一個單擊相應函數
var checkedNoBtn = document.getElementById('checkedNoBtn');
checkedNoBtn.onclick = function() {
//獲取v
// 遍歷items
for (var i = 0; i < item.length; i++) {
// 設置四個多選框變成選中狀態
// 通過多選框的checked屬性可以來獲取或者設置覆選框是否被選中
item[i].checked = false;
}
}
// 為checkedRevBtn的按鈕綁定一個單擊相應函數
var checkedRevBtn = document.getElementById('checkedRevBtn');
checkedRevBtn.onclick = function() {
//獲取四個多選框items
// 遍歷items
for (var i = 0; i < item.length; i++) {
// 設置四個多選框變成選中狀態
// 通過多選框的checked屬性可以來獲取或者設置覆選框是否被選中
item[i].checked = !item[i].checked;
}
}
// 為sendBtn的按鈕綁定一個單擊相應函數
var sendBtn = document.getElementById('sendBtn');
sendBtn.onclick = function() {
//獲取四個多選框items
// 遍歷items
console.log(123);
for (var i = 0; i < item.length; i++) {
// 設置四個多選框變成選中狀態
// 通過多選框的checked屬性可以來獲取或者設置覆選框是否被選中
if(item[i].checked){
console.log(item[i].value);
}
}
}
//為checkedAllBox的覆選框綁定一個單擊相應函數
var checkedAllBox = document.getElementById('checkedAllBox');
checkedAllBox.onclick=function(){
for (var i = 0; i < item.length; i++) {
// 設置四個多選框變成選中狀態
// 通過多選框的checked屬性可以來獲取或者設置覆選框是否被選中
item[i].checked=this.checked;
}
}
//為四個多選框分別綁定點擊響應函數
for (var i = 0; i<item.length;i++){
item[i].onclick=function(){
//將checkedAllBox設置為選中狀態
checkedAllBox.checked=true;
for(var j=0;j<item.length;j++){
// 判斷四個多選框是否是全選
if(!item[j].checked){
// 一旦進入判斷，則證明不是全選狀態
// 將checkedAllBox設置為沒有選中狀態
checkedAllBox.checked=false;
// 一旦進入判斷 則已經得出結果 不用再繼續執行迴圈
break；
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
你愛好的運動是什麼？<input type="checkbox" id="checkedAllBox" value="" /><label for="checkedAllBox">全選/全不選</label>
<br />
<input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label>
<input type="checkbox" name="items" id="2" value="籃球" /><label for="2">籃球<label>
<input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label>
<input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label>
<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>