jquery实现全选功能

<!--HTML部分：--><ul> <li><input type="checkbox" class="chk" id="checkAll"/><label for="checkAll">全选</label></li> <li><input type="checkbox" class="chk chk01"/>1</li> <li><input type="checkbox" class="chk chk01"/>2</li> <li><input type="checkbox" class="chk chk01"/>3</li> <li><input type="checkbox" class="chk chk01"/>4</li> <li><input type="checkbox" class="chk chk01"/>5</li></ul> <!--JS部分：-->
<script> $(document).on("click","#checkAll",function(){ $(".chk01").prop("checked",$(this).prop("checked"))//多选框的状态与全选框状态保持一致 }) $(".chk01").each(function(){ $(this).click(function(){ if(!$(this).prop("checked")){//多选框有一个未选中 全选变为未选中状态 $("#checkAll").prop("checked",false) }else if($(this).prop("checked")){ $(".chk01").each(function(index,ele){ if($(this).prop("checked")){ if(index == $(".chk01").length - 1){ $("#checkAll").prop("checked",true)//多选框全部选中 全选变为选中状态 } return true//each()跳过本次循环 }else{ return false//each()跳出循环 } }) } }) })</script>