JavaScript-選擇項中的全選、全不選、反選
阿新 • • 發佈:2019-01-06
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2' );
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=document.getElementsByTagName("input");
//點選全選按鈕後,全部選中
oBtn1.onclick=function()
{
for(var i=0;i<aCh.length;i++)
aCh[i].checked=true ;
}
//點選不選按鈕後,選擇全部取消
oBtn2.onclick=function()
{
for(var i=0;i<aCh.length;i++)
aCh[i].checked=false;
}
//點選反選按鈕後,選擇項取消,未被選擇項選擇
//注意if語句裡使用的是雙等號,屬於判斷
//其他語句裡是單等,屬於賦值
oBtn3.onclick=function()
{
for (var i=0;i<aCh.length;i++)
if(aCh[i].checked==true)
{
aCh[i].checked=false;
}else{
aCh[i].checked=true;
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全選"/>
<input id="btn2" type="button" value="不選"/>
<input id="btn3" type="button" value="反選"/>
<div id="div1">
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<input type="checkbox"/></br>
<div id="btn"></div>
</div>
</body>
</html>