<!DOCTYPE?HTML>
<html>????
<head>????????
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">????????
<title>無標題文檔</title>????
</head>????????
<body>????????
<form>??????????
請選擇你愛好:
<br>??????????
①<input?type="checkbox"?name="hobby"?id="hobby1">??音樂<br>??????????
②<input?type="checkbox"?name="hobby"?id="hobby2">??登山<br>??????????
③<input?type="checkbox"?name="hobby"?id="hobby3">??游泳<br>??????????
④<input?type="checkbox"?name="hobby"?id="hobby4">??閱讀<br>??????????
⑤<input?type="checkbox"?name="hobby"?id="hobby5">??打球<br>??????????
⑥<input?type="checkbox"?name="hobby"?id="hobby6">??跑步<br>??????????
<br>??????????
<input?type="button"?value?=?"全選"?onclick?=?"checkall();">??????????
<input?type="button"?value?=?"全不選"?onclick?=?"clearall();">??????????
<p>請輸入您要選擇愛好的序號，序號為1-6:</p>??????????
<input?id="wb"?name="wb"?type="text"?>??????????
<input?name="ok"?type="button"?value="確定"?onclick?=?"checkone();">????????
</form>????????
<script?type="text/javascript">????????
????function?checkall(){????????????
????//?var?hobby?=?document.getElementsByTagName("input");????????????
????????for(const?e?of?checkboxs()){????????????????
????????????e.checked=true;????????????
????????????}??????????
????}????????
????function?clearall(){????????????
????//?var?hobby?=?document.getElementsByName("hobby");????????????
????????for(const?e?of?checkboxs()){????????????????
????????????e.checked=false;????????????
????????????}????????
????}????????????????
????function?checkone(){????
????//可以反選????????????
????????var?j=document.getElementById("wb").value;????????????????????????
????????var?x=document.getElementById("hobby"+j);????????????
????????x.checked=!x.checked;?????????
????????//或者可以用?checkboxs()[j-1].checked?=?!checkboxs()[j-1].checked;?????????
????}????????
????function?checkboxs?()?{????????????
????????return?document.getElementsByTagName("input")&&document.getElementsByName("hobby");???????
????}????????????????
</script>????
</body>
</html>
2020-12-15
function?checkall()?{???????????? ????Array.from(document.getElementsByName('hobby')).map(val?=>?val.checked?=?true);???????? }???????? function?clearall()?{???????????? ????Array.from(document.getElementsByName('hobby')).map(val?=>?val.checked?=?false);??????????? }???????? function?checkone()?{???????????? ????var?j?=?document.getElementById("wb").value;???????????? ????document.getElementById('hobby'?+?j).checked?=?true;??????? }checkall?和 clearall?完全可以合并成一個函數，傳個?boolean ，一句話搞定
function?isAll(all)?{???????????? ????Array.from(document.getElementsByName('hobby')).map(val?=>?val.checked?=?all);???????? }2020-12-02
???nnn