abstract：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>JavaScript案例-全選效果</title> <style
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript案例-全選效果</title>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:100px;
height:220px;
margin:20px auto;
padding:5px;
border:1px solid #666;
border-radius:5px;
}
.box input{
margin:8px 5px;
}
.box hr{
margin:4px 0px;
background-color:#000;
}
</style>
<script type="text/javascript">
function checkAll(){ //創(chuàng)建函數(shù)
var checkall,option; //聲明兩個變量
checkall=document.getElementById("checkall"); //獲取id="checkall"即全選
option=document.getElementsByName("option[]"); //獲取name="option[]"即選項
for (i=0;i<option.length;i++){ //循環(huán)顯示各選項狀態(tài)
if(checkall.checked){ //如果全選框被選中，各選項被選中
option[i].checked=true;
}else{ //如果全選框未被選中，各選項也不被選中
option[i].checked=false;
}
}
}
//input的checked屬性規(guī)定input元素首次加載時應當被選中。
</script>
</head>
<body>
<div class="box">
<input type="checkbox" id="checkall" onclick="checkAll()" /><label for="checkall">全選</label><br />
<!-- <label>為表單控件定義標簽 -->
<hr />
<input type="checkbox" name="option[]" />選項1<br />
<input type="checkbox" name="option[]" />選項2<br />
<input type="checkbox" name="option[]" />選項3<br />
<input type="checkbox" name="option[]" />選項4<br />
<input type="checkbox" name="option[]" />選項5<br />
<input type="checkbox" name="option[]" />選項6<br />
</div>
</body>
</html>
Correcting teacher：韋小寶Correction time：2019-02-27 09:11:08
Teacher's summary：寫的很不錯了 全選在很多網(wǎng)站中都會使用到 不管是網(wǎng)站的前臺還是后臺基本上都會有 所以一定要好好掌握咯