js實作多選框的全選
<form action="" method="post">
<input type="checkbox" id="first" /><br>
<input type="checkbox" name="aihao" value="唱歌" />唱歌 <br>
<input type="checkbox" name="aihao" value="跳舞" />跳舞 <br>
<input type="checkbox" name="aihao" value="睡覺" />睡覺 <br>
<input type="button" id="submit" value="送出" />
</form>
<script type="text/javascript">
var first = document.getElementById('first');
var aihaos = document.getElementsByName('aihao');
first.onclick = function() {
for (var i = 0; i < aihaos.length; i++) {
aihaos[i].checked = first.checked;
}
}
//當都被選中時,複選框也被選中
var all = aihaos.length;
for (var i = 0; i < aihaos.length; i++) {
console.log('for循環')
aihaos[i].onclick = function() {
var count = 0;
for (var j = 0; j < aihaos.length; j++) {
console.log('j='+j);
if (aihaos[j].checked) {
count++;
}
}
console.log(count);
first.checked = (all == count);
}
}
//送出value值,為一個String數組
var submit = document.getElementById('submit');
submit.onclick = function () {
var arr = [];
for (var i = 0; i < aihaos.length; i++) {
if (aihaos[i].checked) {
arr.push(aihaos[i].value)
}
}
console.log(arr);
}
</script>