多种方法给checkbox赋值、获取value值、全选、取消全选

1、获取单个已选择的checkbox选中项的value

$("input:checkbox:checked").val() ;$("input:[type='checkbox']:checked").val();$("input:[name='coupon_id']:checked").val(); 

2、获取多个checkbox选中项:

var arr=[];
$('input:checkbox').each(function() { 
    if ($(this).is(':checked')) { //判断选中
       arr.push($(this).val())
    } 
}); 

3、设置checkbox 选中值

checked或者true 代表选中;false未选中

(3.1)单个选中

$('input:checkbox:first').attr("checked",'checked');$('input:checkbox').eq(n).attr("checked",'true'); 		//第n个选中(0代表第一个)$('input:radio:last').attr('checked', 'checked');$("input:checkbox[value='1']").attr('checked','true'); 

(3.2) 选中多个checkbox:

$('input:radio').slice(0,2).attr('checked','true');  //同时选中第1个和第2个的checkbox$("input[type='checkbox']").prop("checked", true);	//全选$('input:checkbox').each(function() {  //全选
    $(this).attr('checked', true); 
});

4、取消选中
(4.1)取消单个选中

$("input:checkbox[value='1']").prop("checked", false);$("input:checkbox").eq(n).prop("checked", false);		//取消第n个选中(0代表第一个)

(4.2)全部取消

$("input[type='checkbox']").prop("checked", false);$('input:checkbox').each(function () { 
    $(this).attr('checked',false); 
});

番外:

	<div class="checkbox_box">
			<input type="checkbox" name="coupon_id" id="" value="1" class="checkbox_coupon" /><label for="">111</label>
			<input type="checkbox" name="coupon_id" id="" value="2" class="checkbox_coupon" /><label for="">222</label>
			<input type="checkbox" name="coupon_id" id="" value="3" class="checkbox_coupon" /><label for="">333</label>
		</div>
		<p><input type="checkbox" name="coupon_id" id="all" value="" /><label for="all">全选</label></p>
	$("#all").on("click", function() { //全选
		if ($(this).is(':checked')) {
			$("input[type='checkbox']").prop("checked", true);
		} else {
			$("input[type='checkbox']").prop("checked", false);
		}
	});
	//全选后取消某个选项,全选按钮退出
	$(document).on("change", '.checkbox_coupon', function() {
		var selected_arr = [];
		var select_arr = [];
		var selected_len = "";
		var select_len = "";
		$(".checkbox_box").find("[name='coupon_id']:checked").each(function() {
			selected_arr.push($(this).val());
		});
		if (selected_arr) {
			selected_len = selected_arr.length
		}
		$(".checkbox_box").find("[name='coupon_id']").each(function() {
			select_arr.push($(this).val());
		});
		if (select_arr) {
			select_len = select_arr.length
		}
		if (select_len == selected_len) {
			$('input:checkbox:last').attr("checked", true);
		} else {
			$('input:checkbox:last').attr("checked", false);
		}
	})
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值