checkbox全选反选/button切换显示隐藏

原创于 2015-09-20 14:56:32 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种实现全选与反选功能的方法，并详细解释了如何通过点击全选复选框来控制子复选框的状态。同时，还介绍了如何在子复选框状态改变时更新全选复选框的状态。此外，文中还提到了一个简单的按钮操作功能，即点击按钮时隐藏或显示某些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选反选的要点：

1.点击全选复选框，子复选框全被选中

再次点击时，子复选框全都没选中

2.点击子复选框，不点击全选时，当子复选框选全时，全选复选框被选中

反之，全选复选框不被选中

$("#ckAll2").click(function() {
			$("input[name='staff']").prop("checked", this.checked);
		});

$("input[name='staff']").click(function() {
			var $staffs = $("input[name='staff']");
			$("#ckAll2").prop("checked" , $staffs.length == $staffs.filter(":checked").length ? true :false);
		});

另外，点击按钮隐藏显示功能：

 $("#pmp").click(function(){
        $("#switch-1").toggle();
        $("#switch-2").hide();
      });