Checkbox的全選/全不選/反選功能

同樣也是不是我寫的, 是看到的

今天如果想要點一個按鈕就能刪除所有email, 這UX體驗是較好的,

想做的功能: 在email中能點選按鈕就全選/全不選全部email, 或是採反選方式, 篩選要的email,


完整code如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<h2>Checkbox全選、取消全選、反選</h2>
<p>
<input type="button" id="allSelect" value="全選">
<input type="button" id="cancelallSelect" value="取消全選">
<input type="button" id="_select" value="反選">
</p>

<input type="checkbox" name="actionSelects">1<br>
<input type="checkbox" name="actionSelects">2<br>
<input type="checkbox" name="actionSelects">3<br>
<input type="checkbox" name="actionSelects">4<br>

<script>

window.onload = function() {

var targets = document.getElementsByName("actionSelects"),
        targetsLen = targets.length,
i = 0;

document.getElementById("allSelect").onclick = function() {                       // 綁定click事件, 用來做"全選"功能

for (i = 0; i < targetsLen; i++) {               // i=0要再寫一次是因要把i歸零, 才能從第1項開始loop

targets[i].checked = true;

}

};

document.getElementById("cancelallSelect").onclick = function() {            // 綁定click事件, 用來做"全不選"功能

for (i = 0; i < targetsLen; i++) {                  // i=0要再寫一次是因要把i歸零, 才能從第1項開始loop

targets[i].checked = false;

}

};

document.getElementById("_select").onclick = function() {                           // 綁定click事件, 用來做"反選"功能

for (i = 0; i < targetsLen; i++) {                   // i=0要再寫一次是因要把i歸零, 才能從第1項開始loop

targets[i].checked = !targets[i].checked;     // 反選的寫法

}

};

};

</script>
</body>
</html>



留言

熱門文章