html中radio、checkbox选中状态研究(副本)

男娘i 2023-02-13 03:20 4阅读 0赞

我们在web页面开发中经常需要让**单选框、复选框进行选中或者不选中的操作，我们知道要让单选框或者复选框默认选中就需要添加checked属性**，但是我们在js中使用 *jquery的attr可以在dom中添加checked属性但是页面却没有选中*。所以 今天进行一个彻底的研究说明。

<!DOCTYPE html>
    <html>
    	<head>
    		<script src="jquery.js"></script>
    	</head>
    	<body>
    		<form name="from1" id="form1" action="test.do">
    			<label>性别：</label>
    			<input type="radio" name="sex" value='male'/><label>男</label>
    			<input name="sex" checked type="radio" value="female"/><label>女</label>
    			<input name="sex" checked type="radio" value="gay"/><label>同性恋</label>
    			<br>
    			<label>科目：</label>
    			<input name='subject' type="checkbox" value="Chinese" /><label>语文</label>
    			<input name='subject' type="checkbox" checked value="Math" /><label>数学</label>
    			<input name='subject' type="checkbox" checked="checked" value="English"/><label>英语</label>
    			<input name='subject' type="checkbox" value="Sport"/><label>体育</label>
    			<input type="submit" />   <input type="reset" />
    		</form>
    	</body>
    </html>

**可以在元素中添加checked属性 或者添加checked=“checked” 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。**  
这里说明一下我们使用**jquery的serialize方法来查看表单提交的内容**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]  
我们可以通过 将checked属性移除.::  
`$("[name='sex']:eq(1)").attr("checked",false);`  
或  
`$("[name='sex']:eq(1)").removeAttr("checked");`  
将checked属性添加上去::  
`$("[name='sex']:eq(1)").attr("checked",true);`  
`$("[name='sex']:eq(1)").attr("checked","");`  
或  
`$("name='sex']:eq(1)").attr("checked","checked");`

![在这里插入图片描述][20200526221122862.png]  
问题来了：  
在单选框radio中，我们多次调用attr给某个radio添加checked属性和移调，此时的checked属性和页面展示的是否选中 并不能相互匹配了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]  
而且我们还发现**checked属性 并不是直接影响 表单的值，而是页面展示的选中才是 表单的值**。  
我们的checkbox复选框 通attr来控制选中也是同样的问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 2]  
我们并*不能* 通 attr来添加checked属性或者移除checked属性来控制单选框或者复选框是否被选中，同样也*不能*通过checked属性来判断该单选框或者复选框是否被选中。  
我们可以使用**jquery的prop方法来判断当前单选框或者复选框是否被真正的选中**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 3]  
选中使用：  
`$("[name='sex']:eq(1)").prop("checked",true);`  
`$("[name='subject']:eq(0)").prop("checked",true);`

取消选中使用：  
`$("[name='sex']:eq(1)").prop("checked",false);`  
`$("[name='subject']:eq(0)").prop("checked",false);`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 5]

## 最后我们总结以下3点： ##

1.  对radio 、checkbox 来说说，checked属性可以保证页面初始化被选中，但是通过js或者jquery 控制checked属性并不能保证相应的被选中，同样也不能通过checked属性来判断该元素是否被选中。
2.  checked属性并不能影响form表单的值，表单页面真正被选中的元素才是form表单提交的值。
3.  通jquery的prop方法可以完美的选中或者取消选中元素，使用prop(“checked”,true) 选中，prop(“checked”,false)取消选中，通prop(“checked”) 返回的false或者true判断是否选中。
4.  prop方法不会改变元素的属性，但是可以用选择器:checked获取到被选元素。

## \---------------------------------------------------------- ##

[参考][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526220651173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[20200526221122862.png]: https://img-blog.csdnimg.cn/20200526221122862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020052622131592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200526221433701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200526221559961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200526221824951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200526222234361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/qq_29542611/article/details/73385002