列表checkbox全选

最新推荐文章于 2022-04-13 11:03:05 发布

weixin_30538029

最新推荐文章于 2022-04-13 11:03:05 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fxfly/p/5000432.html

本文介绍了一种使用jQuery实现的选择框联动效果。具体来说，当首个复选框被选中时，所有后续复选框将自动选中；反之，若首个复选框未被选中且所有后续复选框也均未选中，则首个复选框也会保持未选中状态。这种联动效果在实际应用中可以提高用户体验。

$(document).ready(function(){
	$(":checkbox:eq(0)").change(function(){
		 if ($(this).is(":checked")) {
             $(":checkbox:gt(0)").attr("checked", true);
         } else {
             $(":checkbox:gt(0)").attr("checked", false);
         }
	});
	$(":checkbox:gt(0)").click(function(){
		if ($(this).is(":checked")&&$(":checkbox:gt(0):checked").length ==$(":checkbox:gt(0)").size()) {
            $(":checkbox:eq(0)").attr("checked", true);
        }else if (!$(this).is(":checked")&&$(":checkbox:gt(0):checked").length ==0) {
            $(":checkbox:eq(0)").attr("checked", false);
        }else{
        	 $(":checkbox:eq(0)").attr("checked", false);
        }
	});
});

转载于:https://www.cnblogs.com/fxfly/p/5000432.html