checkBox 选中移除

最新推荐文章于 2022-09-06 16:33:08 发布

caox_nazi

最新推荐文章于 2022-09-06 16:33:08 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： checkbox js jquery 选中移除

本文链接：https://blog.youkuaiyun.com/caox_nazi/article/details/83095619

WEB前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用原生JavaScript和jQuery来判断、设置及移除checkbox的选择状态。包括判断是否选中、设置选中状态以及取消选中，还提供了一个实例，展示了如何在点击时仅选中当前checkbox并取消所有其他checkbox的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

checkBox 选中移除

（1）使用原生JavaScript判断是否选中checkbox框（js）

<input type="checkbox" id="test" class="test">同意
<script>
    // 获取checkbox元素
    var box=document.getElementById("test");      
    // 判断是否被拒选中，选中返回true，未选中返回false
    alert(box.checked);
</script>

（2）使用原生JavaScript移除选中checkbox框（js）

<input type="checkbox" id="test" class="test">同意
<script>
    // 获取checkbox元素
    var box=document.getElementById("test");      
    // 判断是否被拒选中，选中返回true，未选中返回false
    box.checked=false;
</script>

（3）使用jQuery判断是否选中checkbox框（jQuery）

<input type="checkbox" id="test" class="test">同意
<script>
    // 选中返回true，未选中返回false
    $('#test').is(":checked");

    // 选中返回true，未选中返回false;一定要注意，这里不可以使用attr("checked")来判断
    $("#test").prop("checked")
</script>

（4）使用jQuery设置选中checkbox框（jQuery）

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","true")
     $("#test").attr("checked","true")
</script>

（5）使用jQuery设置移除checkbox框（jQuery）

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","false")
     $("#test").attr("checked","false")
</script>

*（6）checkbox框强制勾选当前进行选中，之前勾选去除（jQuery）

html页面：

<ul class="the-icons clearfix pro_ul" uc="up" id="pro_ul_checkbox">
	<c:forEach items="${products }" varStatus="stt" var="pro">
		<li ptp="zf" pid="${pro.productCode }" mid="${pro.platformNo }" onclick="forProFlag('${pro.status}')">
			<input type="checkbox" id="m_pro_${pro.productCode }" name="m_pro" value="${pro.productCode}"
				   memberId="${pro.platformNo}" productCodeName="${pro.description}"
				   class="checker box_show">
			<span title="${pro.description }">
				 <c:if test="${pro.status=='CLOSE'}">
					<b class="unIn">${pro.description }</b>
				 </c:if>
				 <c:if test="${pro.status=='OPEN'}">
					${pro.description }
				 </c:if>
		   </span>
		</li>
	</c:forEach>
</ul>

Js操作：

$(".pro_ul li input").on("click",function(){
	<!--去除勾选之前的样式-->
	$('.pro_ul input[name="m_pro"]').parent().removeClass("checked");
	
	<!--实际使得去除勾选之前值失效-->
	$('.pro_ul input[name="m_pro"]').attr("checked" ,false);
	
	<!--勾选当前选中的 样式增加-->
	$(this).addClass("checked");
	<!--实际勾选当前选中的 使得勾选中生效-->
	$(this).attr("checked", true);
	
});

-->参考文献