JQuery完成全选，不选，反选功能

最新推荐文章于 2022-12-13 22:34:38 发布

终于等到妳

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/qq_37301071/article/details/102395815

版权

JQuery完成全选，不选，反选功能

方法一：

使用button按钮的id属性选择器的点击事件：

// 全选
$("#checkAll").click(function(){
//input标签下的type属性为checkbox的元素 .prop(“checked”,true);设置属性值
$(“input:checkbox”).prop(“checked”,true);
});
//全不选
$("#unCheckAll").click(function(){
$(“input:checkbox”).prop(“checked”,false);
});
//反选
$("#reverseCheck").click(function(){
$(“input:checkbox”).each(function(){
$(t h i s) . p r o p (" c h e c k e d ",!$ (this).prop(“checked”))
});
});

方法二：

使用复选框的id属性选择器的点击事件：

//全选or全不选
$("#all").click(function(){
//input标签下的type属性为checkbox的元素 .prop(“checked”,true);设置属性值
if (this.checked) {
$(“input:checkbox[name=‘choose’]”).prop(“checked”,true);
} else{
$(“input:checkbox[name=‘choose’]”).prop(“checked”,false);
}
});

//获取值
$("#getValue").click(function(){
var valArr = new Array;
$(“input:checkbox[checked][name=‘choose’]”).each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(’,’);
alert(vals);
});

<body>
		<p id="id1"></p>
		<input type="button" name="test" id="test" value="九九乘法表" onclick="test1()"/><br />
		<input id="checkAll" type="button" value="全选">
		<input id="unCheckAll" type="button" value="全不">
		<input id="reverseCheck" type="button" value="反选"><br />
		<input id="all" type="checkbox">全选/全不<br />
		<input type="checkbox" name="choose" value="选项一"/>选项一
		<input type="checkbox" name="choose" value="选项二"/>选项二
		<input type="checkbox" name="choose" value="选项三"/>选项三
		<input type="checkbox" name="choose" value="选项四"/>选项四
		<input type="button" value="获取复选框值" id="getValue"/>
	</body>
	```

终于等到妳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery完成全选，不选，反选功能

JQuery完成全选，不选，反选功能方法一：使用button按钮的id属性选择器的点击事件：// 全选$("#checkAll").click(function(){//input标签下的type属性为checkbox的元素 .prop(“checked”,true);设置属性值$(“input:checkbox”).prop(“checked”,true);});//全不选$...
复制链接

扫一扫