jQuery实现全选&全不选&非全选
更新时间:2017年03月23日 15:08:42 作者: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); } })
相关文章
jQuery实现table中两列CheckBox只能选中一个的示例
下面小编就为大家带来一篇jQuery实现table中两列CheckBox只能选中一个的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09有关jQuery中parent()和siblings()的小问题
本文通过一个实例给大家介绍有关parent()和siblings()问题原因及解决方案,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧2016-06-06jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
这篇文章主要介绍了jQuery图片前后对比插件beforeAfter用法,结合实例形式分析了beforeAfter插件的功能、参数用法与使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
最新评论