JS實作購物車全選、不選、反選的功能（十七）
這里沒有使用購物車啦，不過原理都是一樣的啦
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
愛好：
<input type="checkbox" name="opts" value="val1">選項1
<input type="checkbox" name="opts" value="val2">選項2
<input type="checkbox" name="opts" value="val3">選項3
<input type="checkbox" name="opts" value="val4">選項4
<input type="checkbox" name="opts" value="val5">選項5
<hr/>
<input type="radio" name="choice" value="quanxuan">全選
<input type="radio" name="choice" value="buxuan">不選
<input type="radio" name="choice" value="fanxuan">反選
<script>
//獲取頁面元素
var opts = document.getElementsByName('opts');
var btns = document.getElementsByName('choice');
//全選
btns[0].onclick = function() {
for (var i = 0; i < opts.length; i++) {
opts[i].checked = true;
}
};
//不選
btns[1].onclick = function() {
for (var i = 0; i < opts.length; i++) {
opts[i].checked = false;
}
};
//反選
btns[2].onclick = function() {
for (var i = 0; i < opts.length; i++) {
//判斷是否為選中狀態
if (opts[i].checked == true) {
opts[i].checked = false;
} else {
opts[i].checked = true;
}
}
};
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273254.html
標籤：其他
下一篇：Canvas跟隨滑鼠炫彩小球