checkBox 选中 移除

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caox_nazi/article/details/83095619

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);
	
});

-->参考文献