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

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

一般情况下:

$("#updateApplyForSmsNotification [name='applyForSmsNotification']").eq(0).attr('checked', 'checked');

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

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

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

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

当然这时可以使用:

$("#updateApplyForSmsNotification [name='applyForSmsNotification']").eq(0).removeAttr('checked');

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

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

但是效果没有体现出来。

这是为什么呢?

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

正确的姿势是:

$("#updateApplyForSmsNotification [name='applyForSmsNotification']").eq(0).prop('checked', 'checked');

$("#updateApplyForSmsNotification [name='applyForSmsNotification']").eq(0).removeProp('checked');

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。