jquery checkbox 全部选择或全部取消

最新推荐文章于 2023-04-03 08:36:43 发布

原创最新推荐文章于 2023-04-03 08:36:43 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #jquery

WEB 同时被 2 个专栏收录

85 篇文章

订阅专栏

59 篇文章

订阅专栏

本文介绍如何利用jQuery实现复选框的全选功能及获取所有被选中项的ID。通过简单的代码示例展示了如何绑定点击事件以控制一组复选框的状态，并收集已选中项的数据。

    //全部选择，jquery版本 1.8
		$(document).on('click','#checkAll',function() {
			var flag = $("#checkAll").is(':checked');
			$("input[name='chk_item']:checkbox").each(function() {
		        $(this).prop("checked", flag);
			});
		});
		
		//获取选中的记录的id
		var ids = "";
		$("input[name='chk_item']:checkbox").each(function() {
				var flag = $(this).is(':checked');
				if(flag){
					ids += $(this).val() + ",";
				}
		});


<input type="checkbox" name="checkAll" id="checkAll" value="">

<input type="checkbox" name="chk_item" value="1">1
<input type="checkbox" name="chk_item" value="2">2
<input type="checkbox" name="chk_item" value="3">3
<input type="checkbox" name="chk_item" value="4">4
<input type="checkbox" name="chk_item" value="5">5
<input type="checkbox" name="chk_item" value="6">6
<input type="checkbox" name="chk_item" value="7">7
<input type="checkbox" name="chk_item" value="8">8
<input type="checkbox" name="chk_item" value="9">9
<input type="checkbox" name="chk_item" value="10">10