jquey操作checkbox，全选，单击，获取值,单击文字选中复选框

最新推荐文章于 2023-05-20 08:42:36 发布

随行随走

最新推荐文章于 2023-05-20 08:42:36 发布

阅读量677

点赞数 1

分类专栏： js 文章标签： checkbox checkbos单击复选框点击文字选中

本文链接：https://blog.csdn.net/qq_25384901/article/details/78645834

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html

<style>
#check1,#check2,#check3,#check4,#check5,#check6,#check7{float:left;}
</style>

<fieldset style="width:780px;height:180px;">
			<p style="width:99%">	
				<input type="checkbox" id="check1" value="1-身份证正面" class="clv"  name="checkbox" class="check"><label for="check1">身份证正面</label>
				<input type="checkbox" id="check2" value="2-身份证反面" class="clv" name="checkbox" class="check"><label for="check2">身份证反面</label>
				<input type="checkbox" id="check3" value="3-手持身份证" class="clv" name="checkbox" class="check"><label for="check3">手持身份证</label>
				<input type="checkbox" id="check4" value="4-银行卡图片" class="clv" name="checkbox" class="check"><label for="check4">银行卡图片</label>
				<input type="checkbox" id="check5" value="5-所有图片" class="clv" name="checkbox" class="check"><label for="check5">所有图片</label>
				<input type="checkbox" id="check6" value="6-认证信息" class="clv" name="checkbox" class="check"><label for="check6">认证信息</label>
				<input type="checkbox" id="check7" value="7-其它" class="clv" name="checkbox" class="check"><label for="check7">其它</label>
			</p>
			<p style="width:98%;magin-top:10px;">
				<label style="width:80px;color:red;font-size:14px;float:left;">打回原因：</label>
				<textarea style="float:left;font-size:14px;padding:2px 3px;margin:3px 0 0 10px;margin-bottom:2px;" class="required" id="updateinput" name="remark" rows="6" cols="70" tools="simple"></textarea>
			</p>
			</fieldset>

单击事件单击任意一个复选框执行jquery （字符串拼接）

    $(".clv").change(function() { 
		var str=""; 
		$('input[name="checkbox"]:checked').each(function(){ 
			str+=$(this).val()+"、"; 
		}); 
		$("#updateinput").val(str);
});

单击事件单击任意一个复选框执行jquery （数组接收）

 $(".clv").change(function() { 
	var chk_value =[]; 
	$('input[name="test"]:checked').each(function(){ 
	chk_value.push($(this).val()); 
	}); 
	alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value); 
});

单击复选框判断是否选中

方法一：
if ($("#check7")get(0).checked) {
    alert();
}
方法二：（比较易懂）
if($('#check7').is(':checked')) {
   alert();
}
方法三：
if ($('#check7').attr('checked')) {
    alert();
}

实现单击文字，复选框选中在复选框后面添加 <label for="check7">其它</label> 其值对应复选框中的数据
全选

全选：$(":checkbox").attr("checked","checked"); 

取消全选：$(":checkbox").removeAttr("checked"); 

获取选中的：$(":checked[checked='checked']") 

不行则尝试：

全选： $(":checkbox").prop("checked",true) 

取消全选：$(":checkbox").prop("checked",false) 

获取选中的：$(":checkbox:checked")

实现如图效果
单击添加数据，选择其他清空数据，其他项选中

$(".clv").change(function() { 
	if($('#check7').is(':checked')) {
		$(":checkbox").removeAttr("checked"); 
		$(this).attr("checked","checked");
		$("#updateinput").val('');
	}else{
		var str=""; 
		$('input[name="checkbox"]:checked').each(function(){ 
			str+=$(this).val()+"、"; 
		}); 
		$("#updateinput").val(str);
	}
});