溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用javascript實現全選、不選和反選效果，這個不用多說，直接來代碼，代碼中自有注釋幫你理解。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
// 獲取所有的按鈕
var btns = document.getElementsByTagName("button");
// 獲取所有的選項input
var inputs = document.getElementsByTagName("input");
// 全選或者不選的時候 調用此函數
function fun(flag){
for (var i=0; i<inputs.length;i++) {
inputs[i].checked = flag;
}
}
//獲取第一個按鈕 “全選”
btns[0].onclick = function(){
fun(true);
}
// 獲取第二個按鈕 "不選"
btns[1].onclick = function(){
fun(false);
}
// 獲取第三個按鈕 “反選”
btns[2].onclick = function(){
// 遍歷所有的選項，判斷每一個選項是否被選中
for (var i=0;i<inputs.length;i++) {
inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
}
}
}
</script>
</head>
<body>
<div id="box1">
<button>全選</button>
<button>不選</button>
<button>反選</button>
</div>
<div id="box2">
<ul>
<li>選項1：<input type="checkbox"></li>
<li>選項2：<input type="checkbox"></li>
<li>選項3：<input type="checkbox"></li>
<li>選項4：<input type="checkbox"></li>
<li>選項5：<input type="checkbox"></li>
<li>選項6：<input type="checkbox"></li>
<li>選項7：<input type="checkbox"></li>
<li>選項8：<input type="checkbox"></li>
<li>選項9：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>
效果展示：
其他實現效果，自行查看！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
