自己做的本章測試(復(fù)選框)
<!DOCTYPE?HTML>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">
????<title>復(fù)選框事件</title>
</head>
<body>
????<form>
????????請選擇你愛好:<br>
????????<input?type="checkbox"?name="hobby"?id="hobby1">?音樂
????????<input?type="checkbox"?name="hobby"?id="hobby2">?登山
????????<input?type="checkbox"?name="hobby"?id="hobby3">?游泳
????????<input?type="checkbox"?name="hobby"?id="hobby4">?閱讀
????????<input?type="checkbox"?name="hobby"?id="hobby5">?打球
????????<input?type="checkbox"?name="hobby"?id="hobby6">?跑步?<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">
????????//實現(xiàn)復(fù)選框的全選功能
????????function?checkall()?{
????????????var?chec?=?document.getElementsByName("hobby")
????????????for?(var?i?=?0;?i?<?chec.length;?i++)?{
????????????????chec[i].checked?=?"true";
????????????}
????????}
????????//實現(xiàn)復(fù)選框的全不選功能
????????function?clearall()?{
????????????var?chec?=?document.getElementsByName("hobby");
????????????for?(var?j?=?0;?j?<?chec.length;?j++)?{
????????????????chec[j].checked?=?event.srcElement.checked;
????????????}
????????}
????????function?checkone()?{
????????????var?j?=?document.getElementById("wb").value;
????????????var?num?=?parseInt(j);
????????????switch?(num)?{
????????????????case?1:
????????????????????document.getElementById("hobby1").checked?=?"true";
????????????????????break;
????????????????case?2:
????????????????????document.getElementById("hobby2").checked?=?"true";
????????????????????break;
????????????????case?3:
????????????????????document.getElementById("hobby3").checked?=?"true";
????????????????????break;
????????????????case?4:
????????????????????document.getElementById("hobby4").checked?=?"true";
????????????????????break;
????????????????case?5:
????????????????????document.getElementById("hobby5").checked?=?"true";
????????????????????break;
????????????????case?6:
????????????????????document.getElementById("hobby6").checked?=?"true";
????????????????????break;
????????????????default:
????????????????????alert("輸入錯誤,請重新輸入...");
????????????}
????????}
????</script>
</body>
</html>
2019-09-10
event.srcElement.checked獲得復(fù)選框的原始狀態(tài)