用jquery实现复选框checkbox的全选

最新推荐文章于 2021-03-10 19:26:35 发布

jianghejie123

最新推荐文章于 2021-03-10 19:26:35 发布

阅读量933

点赞数

分类专栏： js/jquery/在线编辑器文章标签： jquery input function class html

本文链接：https://blog.csdn.net/jianghejie123/article/details/7445602

版权

js/jquery/在线编辑器专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先需要引入jquery的代码，引入方法略

js代码

$(document).ready(function() {
		$(".all_select_input").click(function() {
			if ($(this).attr("checked")) {
				
				
				$("input[name='checkbox1']").each(function() {
					$(this).attr("checked", true);
				});
				
				$(".all_select_input").each(function() {
					$(this).attr("checked", true);
				});
				
				
			} else {
				
				$("input[name='checkbox1']").each(function() {
					$(this).attr("checked", false);
				});
				
				$(".all_select_input").each(function() {
					$(this).attr("checked", false);
				});
				
			}

		});
		
		//当有一个复选框没被选中时，将全选的复选框设置为未选状态
		$("input[name='checkbox1']").click(function() {

				if(!$(this).attr("checked"))
				$(".all_select_input").each(function() {
					$(this).attr("checked", false);
				});
		});
		
		
	});

html代码：

<input type="checkbox" class="all_select_input" name="checkbox2" value="checkbox" />全选

<input type="checkbox" class="all_select_input" name="checkbox2" value="checkbox" />全选