JQ 控制单选款选中和取消选中

JavaScript013

JQ 控制单选款选中和取消选中,第1张

单选按钮的选中与取消选中，是元素自带的属性checked来实现的

一般情况下：

这个方法就可以满足实现将其第一个单选按钮选中。

但是如果这个是根据后台传到页面的值来实现的一个动态单选按钮选中。

下一次再赋值选中时可能会造成多个单选按钮都被选中。

页面就识别不出来应该将哪一个单选元素选中。

当然这时可以使用：

然后再将需要的单选元素选中。

但是可能会出现BUG，页面上虽然单选元素的属性是被checked了的（chrome F12查看）。

但是效果没有体现出来。

这是为什么呢？

其实很简单，一开始实现选中与取消选中的方式就错误了

正确的姿势是：

这是因为prop才是官方推荐的操作元素的固有属性，比如input标签的id/class/type/style等等

而attr更多的是用来操作元素的自定义属性

单选框的选中与取消与JQuery没有直接关系。只需要设置radio的name值就可以了，相同name值的radio的定义中，是不能有两个同时被选中的。

<input type="radio" id="1" name="rd_Grame" >

<input type="radio" id="2" name="rd_Grame" >

<input type="radio" id="3" name="rd_Grame" >

<input type="radio" id="4" name="rd_Grame" >

<input type="radio" id="5" name="rd_Grame" >

这些radio的选中状态是相斥的，也就是只能有一个被选中。当你选中一个，再点击其他未被选中的radio是，之前被选中的就会自动取消选中状态了。

如果有多组，可以给不同的组设置不同的name值，比如

性别：

<input type="radio" id="1" name="rd_Grame" >男

<input type="radio" id="2" name="rd_Grame" >女

爱好：

<input type="radio" id="3" name="rd_Fav" >台球

<input type="radio" id="4" name="rd_Fav" >足球

<input type="radio" id="5" name="rd_Fav" >乒乓球