经常会在浏览网页的时候,看到多选这种页面,选中“全部”,所有选项勾选,取消选中,所有选项取消勾选。
下面,是此类代码
html:
<div id="scan-week">
<p><b>每周扫描工作站</b></p>
<div>
<div class="scan-week-day-fram">
<span><input type="checkbox"/><b>每天</b><br></span>
<ul class="scan-week-days">
<li><input type="checkbox"/>星期日</li>
<li><input type="checkbox"/>星期一</li>
<li><input type="checkbox"/>星期二</li>
<li><input type="checkbox"/>星期三</li>
<li><input type="checkbox"/>星期四</li>
<li><input type="checkbox"/>星期五</li>
<li><input type="checkbox"/>星期六</li>
</ul>
</div>
</div>
</div>
对应的js代码:
$("#scan-week").on("click",".scan-week-days [type='checkbox']",function(){
var chb=$(".scan-week-days").find("[type='checkbox']:not(:checked)");
$("#scan-week span [type='checkbox']").prop("checked",chb.length==0?true:false)
});
$("#scan-week span [type='checkbox']").click(function(){
var judge=$("#scan-week span [type='checkbox']").prop("checked");
$("#scan-week .scan-week-days [type='checkbox']").prop("checked",judge);
})