<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<label for="checkedAllBox">你愛好的運動是？</label><input type="checkbox" id="checkedAllBox"/>全選/全不選
<br/>
<!--定義了復選框type="checkbox". 用戶需要從若干給定的選擇中選取一個或若干選項，-->
<label>
<input type="checkbox" name="items" value="https://www.cnblogs.com/huaweimian/p/足球"/>
足球
</label>
<label>
<input type="checkbox" name="items" value="https://www.cnblogs.com/huaweimian/p/藍球"/>
藍球
</label>
<label>
<input type="checkbox" name="items" value="https://www.cnblogs.com/huaweimian/p/羽毛球"/>
羽毛球
</label>
<label>
<input type="checkbox" name="items" value="https://www.cnblogs.com/huaweimian/p/乒乓球"/>
乒乓球
</label>
<br/>
<input type="button" id="checkedAllBtn" value="https://www.cnblogs.com/huaweimian/p/全 選"/>
<input type="button" id="checkedNoBtn" value="https://www.cnblogs.com/huaweimian/p/全不選"/>
<input type="button" id="checkedRevBtn" value="https://www.cnblogs.com/huaweimian/p/反 選"/>
<input type="button" id="sendBtn" value="https://www.cnblogs.com/huaweimian/p/提 交"/>
</form>
</body>
</html>
<script>
function myClick1(idStr,fun){
//全選/全不選框的地址
var checkedAllBox=document.getElementsByName("checkedAllBox");
// 全選按鈕：點擊按鈕之后，四個多選框全都被選中
const btn=document.getElementById(idStr);
btn.onclick=fun;
}
// 全選框
myClick1("checkedAllBtn",function () {
var items=document.getElementsByName("items");
//items為一個陣列，需要遍歷
for(let i=0;i<items.length;i++){
//設定四個多選框變成選中狀態
//通過多選框的checked屬性獲取或設定多選框的選中狀態
items[i].checked=true;
}
checkedAllBox.checked=true;
});
// 全不選按鈕：點擊之后，四個多選框全都不被選中
myClick1("checkedNoBtn",function () {
var items = document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
});
// 反選：點擊之后選中的變成沒選中，沒選中的選中
myClick1("checkedRevBtn",function () {
var items=document.getElementsByName("items")
for(let i=0;i<items.length;i++){
/* if(items[i].checked===false){
items[i].checked=true;
}
else{
items[i].checked=false;
}*/
//反選時也需要判斷四個多選框是否全部選中
items[i].checked=!items[i].checked;
checkedAllBox.checked=true;
//判斷四個多選框是否全選,只要有一個沒選中就不是全選
for(let j=0;j<items.length;j++) {
if (!items[j].checked) {
// 一旦進入判斷，則證明不是全選狀態
// 將checkedAllBox設定為沒選中
checkedAllBox.checked = false;
}
}
}
/* checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判斷四個多選框是否全選,只要有一個沒選中就不是全選
if(!items[j].checked){
// 一旦進入判斷，則證明不是全選狀態
// 將checkedAllBox設定為沒選中
checkedAllBox.checked=false;
break;
}
}*/
});
// 提交按鈕:點擊之后所有多選框的value屬性值彈出
myClick1("sendBtn",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
if(items[i].checked===true){
alert(items[i].value)}}
});
//全選中或全不選中
myClick1("checkedAllBox",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
// items[i].checked=checkedAllBox.checked;
items[i].checked=this.checked;
}
});
/*如果四個多選框全都選中，則checkAllBox也應該選中
如果四個多選框全都不選中，則checkAllBox也應該不選中*/
//為四個多選框分別系結點擊回應函式
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].onclick=function () {
checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判斷四個多選框是否全選,只要有一個沒選中就不是全選
if(!items[j].checked){
// 一旦進入判斷，則證明不是全選狀態
// 將checkedAllBox設定為沒選中
checkedAllBox.checked=false;
break;
}
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7209.html
標籤：JavaScript
上一篇：關于arcgis打開卡死的問題