復選框全選/全部選
<!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="https://www.cnblogs.com/SSPOFA/p/足球" /><label for="1">足球</label>
<input type="checkbox" name="items" id="2" value="https://www.cnblogs.com/SSPOFA/p/籃球" /><label for="2">籃球<label>
<input type="checkbox" name="items" id="3" value="https://www.cnblogs.com/SSPOFA/p/羽毛球" /><label for="3">羽毛球</label>
<input type="checkbox" name="items" id="4" value="https://www.cnblogs.com/SSPOFA/p/乒乓球" /><label for="4">乒乓球</label>
<br />
<input type="button" id="checkedAllBtn" value="https://www.cnblogs.com/SSPOFA/p/全 選" />
<input type="button" id="checkedNoBtn" value="https://www.cnblogs.com/SSPOFA/p/全不選" />
<input type="button" id="checkedRevBtn" value="https://www.cnblogs.com/SSPOFA/p/反 選" />
<input type="button" id="sendBtn" value="https://www.cnblogs.com/SSPOFA/p/提 交" />
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/162719.html
標籤：JavaScript
上一篇：現代前端庫開發指南系列（二）：使用 webpack 構建一個庫
下一篇：太極圖繪制