jQuery实现全选&全不选&非全选
作者:wizx1992
本文主要介绍了jQuery实现全选&全不选&非全选,具有很好的参考价值,下面跟着小编一起来看下吧
1.点击全选 选中/取消所有复选框
2.取消某一个复选框,全选按钮不选中
3.勾选所有复选框后,全选按钮选中
<div> <div><input type="checkbox" name="checkbox" />复选框1</div> <div><input type="checkbox" name="checkbox" />复选框2</div> <div><input type="checkbox" name="checkbox" />复选框3</div> <div><input type="checkbox" name="checkbox" />复选框4</div> <div><input type="checkbox" name="checkbox" />复选框5</div> <br> <div><input type="checkbox" name="checkall" />全选</div> </div>
$('input[name="checkall"]').click(function(){ if($(this).is(':checked')){ $('input[name="checkbox"]').each(function(){ $(this).prop("checked",true); }); }else{ $('input[name="checkbox"]').each(function(){ $(this).prop("checked",false); }); } }); // 全选 $('input[name="checkall"]').click(function(){ if($(this).is(':checked')){ $('input:checkbox[name=checkbox]').each(function(){ $(this).prop("checked",true); }) }else{ $('input:checkbox[name=checkbox]').each(function(){ $(this).prop("checked",false); }) } }) var ifAllChecked = true; // 是否全选-----是否选中全选按钮 $('input:checkbox[name=checkbox]').click(function(){ ifAllChecked = true $('input:checkbox[name=checkbox]').each(function(i){ if(!$(this).is(':checked')){ // 有未选 ifAllChecked = false; } }); if(ifAllChecked){ $('input[name="checkall"]').prop("checked",true); }else{ $('input[name="checkall"]').prop("checked",false); } })