js全選的練習
<html>
<!--使用複選框上面的一個屬性判斷是否選中
checked屬性
checked=true 選中
checked=false 不選中
*創建一個頁面
複選框和按鈕
四個複選框表示愛好
還有一個複選框操作：全選和全不選，有一個事件
-->
<head>
<meta charset="UTF-8">
<title>複選框的全選練習</title>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();" />全選/全不選
<br />
<input type="checkbox" name="love">唱歌<br />
<input type="checkbox" name="love">跳舞<br />
<input type="checkbox" name="love">羽毛球<br />
<input type="checkbox" name="love">排球<br />
<input type="button" value="全選" onclick="selAll();" >
<input type="button" value="全不選" onclick="selNo();" >
<input type="button" value="反選" onclick="selOther();" >
</body>
<script type="text/javascript">
//實現全選和全不選的操作
// 步驟：
// 1、得到上面的那個複選框
// 通過id得到
// 2.判斷這個複選框是否被選中
// -if條件，checked==true
// 3.如果選中，下面是全選
// 4.如果不選中，下面是全不選
function selAllNo(){
//得到上面的複選框
var boxid=document.getElementById("boxid");
if(boxid.checked==true){//是選擇狀態
selAll();//調用全選方法
}
else{//不是選中狀態
//調用全不選方法
selNo();
}
}
//實現全選的操作
//步驟：
// 1.獲取要操作的複選框
// -使用getElementByName()
// 2.返回的是數組
// -屬性checked判斷是否選中
// ***checked==true 表示選中狀態
// ***checked=false 表示不選中狀態
// -遍歷數組，得到每一個checked
// *把每一個checked屬性checked=true；
function selAll(){
// 獲取要操作的複選框
// 使用getElementsByName()
var loves=document.getElementsByName("love");
//遍歷數組，得到每一個複選框
for(var i=0;i<loves.length;i++){
var love1=loves[i];//得到每一個複選框
love1.checked=true;//設置屬性
}
}
//實現反選的操作
function selOther(){
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love1=loves[i];
if(love1.checked==false){
love1.checked=true;
}
else{
love1.checked=false;
}
}
}
//實現全不選的操作
function selNo(){
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love1=loves[i];
love1.checked=false;
}
}
</script>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur