checkBox 选中移除

忘是亡心i 2022-05-09 14:42 284阅读 0赞

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

[\-->参考文献][--]

[--]: https://blog.csdn.net/fengzhen8023/article/details/81304171