????：<!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; //聲明兩個(gè)變量
checkall=document.getElementById("checkall"); //獲取id="checkall"即全選
option=document.getElementsByName("option[]"); //獲取name="option[]"即選項(xiàng)
for (i=0;i<option.length;i++){ //循環(huán)顯示各選項(xiàng)狀態(tài)
if(checkall.checked){ //如果全選框被選中，各選項(xiàng)被選中
option[i].checked=true;
}else{ //如果全選框未被選中，各選項(xiàng)也不被選中
option[i].checked=false;
}
}
}
//input的checked屬性規(guī)定input元素首次加載時(shí)應(yīng)當(dāng)被選中。
</script>
</head>
<body>
<div class="box">
<input type="checkbox" id="checkall" onclick="checkAll()" /><label for="checkall">全選</label><br />
<!-- <label>為表單控件定義標(biāo)簽 -->
<hr />
<input type="checkbox" name="option[]" />選項(xiàng)1<br />
<input type="checkbox" name="option[]" />選項(xiàng)2<br />
<input type="checkbox" name="option[]" />選項(xiàng)3<br />
<input type="checkbox" name="option[]" />選項(xiàng)4<br />
<input type="checkbox" name="option[]" />選項(xiàng)5<br />
<input type="checkbox" name="option[]" />選項(xiàng)6<br />
</div>
</body>
</html>
?? ???：韋小寶?? ??：2019-02-27 09:11:08
???? ??：寫(xiě)的很不錯(cuò)了 全選在很多網(wǎng)站中都會(huì)使用到 不管是網(wǎng)站的前臺(tái)還是后臺(tái)基本上都會(huì)有 所以一定要好好掌握咯