Checkbox的全選/全不選/反選功能
同樣也是不是我寫的, 是看到的
想做的功能: 在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>
留言
張貼留言