html部分:
<ul class="titleUl">
<li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectAllLi"/></li>
<li class="titleItemLi smLi">序号</li>
<li class="titleItemLi lLi">寿命</li>
</ul>
<ul class="contentUl">
<li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectItemLi"/></li>
<li class="titleItemLi smLi">1</li>
<li class="titleItemLi lLi">350</li>
</ul>
<ul class="contentUl">
<li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectItemLi"/></li>
<li class="contentItemLi smLi">2</li>
<li class="contentItemLi lLi">2</li>
</ul>
1. 设置checkbox选中和不选择状态:
// 设置选中
$(".selectItemLi").attr('checked',true);
// 或
$(".selectItemLi").prop('checked',true);
// 设置不选中
$(".selectItemLi").attr('checked',false);
// 或
$(".selectItemLi").prop('checked',false);
2. 获取checkbox值
// 获取是否选中,true为选中,false为未选中
$(".selectAllLi").is(':checked')
3. 全选和全不选
/**
* 全选
*/
$(".selectAllLi").click(function () {
if ($(".selectAllLi").is(':checked')){
$(".selectItemLi").prop('checked',true);
} else{
$(".selectItemLi").prop('checked',false);
}
})
ps: 切换状态用到prop方法,试过用attr来切换,发现第一次切换成功了,第二次下面的checkbox状态未变更,暂时没找到原因,用prop则没有bug。如果后期找到原因会来更新。
样式:全选
全不选