首頁 > web前端 > js教程 > javascript怎麼設定全選

javascript怎麼設定全選

藏色散人
發布: 2021-06-27 10:30:48
原創
2669 人瀏覽過

javascript設定全選的方法:首先建立一個HTML範例檔案;然後新增script標籤並建立js程式碼;最後透過循環遍歷每個checkbox對象,將其checked屬性設為true實作全選功能即可。

javascript怎麼設定全選

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

javascript怎麼設定全選?

JavaScript實作全選:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbox的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>
</html>
登入後複製

Checkbox 物件:

Checkbox 物件代表一個 HTML 表單中的一個選取框。

在 HTML 文件中 每出現一次,Checkbox 物件就會被建立。

您可以透過遍歷表單的 elements[] 陣列來存取某個選擇框,或透過使用 document.getElementById() 。

checked 屬性:

checked 屬性設定或傳回 checkbox 是否應被選取。

語法

checkboxObject.checked=true|false
登入後複製

說明

該屬性保存了checkbox 的當前狀態,不管何時,這個值發生變化的時候,onclick 事件句柄就會觸發(也可能觸發onchange 事件句柄)。

【推薦學習:javascript高階教學

#

以上是javascript怎麼設定全選的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板