jquery选中radio或checkbox的正确姿势

发布时间:2020-11-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了jquery选中radio或checkbox的正确姿势编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jquery选中radio或checkbox的正确姿势

Intro

前几天突然遇到一个问题,没有任何征兆的。。,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料,发现自己的姿势有问题。

Issue

我按下面的方式选中 radio 时,发现有时候会选不中。

  <label class="t-radio t-circle-radio t-green-radio"><input type="radio" value="1" onchange="$('#saleInfo').show()" checked="checked" name="isOnSale" />加入</label>
  ="0"="$('#saleInfo').hide()"/>不加入>

 

下面是我的 js 代码

    //前面已引用 jquery.js 后文不再赘述
    ...
    $("input[type='radio'][name='isOnSale'][value='1']").attr("checked","checked");

 

Solution0

区分 attribute 和 property

attribute 和 property 是不同的

property 是 html 标签固有的属性,而 attribute 多是 html 自定义属性。

attribute是html文档上标签属性,而 property 则是对应 DOM 元素的自身属性。 从操作方法上来看,attribute可以通过 DOM规范的 getAttributesetAttribute进行获取修改,而property可以通过对象访问属性的方式 . 或者 [" "]来修改获取。 jquery 获取或设置 attribute 用的是 attr,获取或设置 property 用的是 prop

Property

DOM 节点是一个对象,所以它像 JavaScript 的对象一样可以存储自定义的属性和方法。

Attribute

DOM节点可以通过以下标准方法访问 HTML 的 attribute

    elem.hasAttribute(name) - checks if the attribute exists
    elem.getAttribute(name) - gets an attribute value
    elem.setAttribute(name,value) - sets an attribute
    elem.removeAttribute(name) - removes an attribute

 

checked 是 input 标签的属性(property)而不是 attribute ,参见 http://www.w3school.com.cn/tags/att_input_checked.asp

更多 input 相关的属性详见: http://www.w3school.com.cn/tags/tag_input.asp

Solution1

HACK:mock click

设置选中之后调用对象的click()方法,模拟点击

    toogle
    $("input:radio[name='isOnSale'][value='1']").click();

 

Solution2

设置 input 的 checked 属性

原生js

    check
    document.getElementsByName("isOnSale")[0].checked = true;
    uncheck
    document.getElementsByName("isOnSale")[0].checked = false;

 

jquery

    //
    $("input[type='radio'][name='isOnSale'][value='1']").prop("checked",true);

 

More

如果你有别的更好的解决方案,欢迎指出。

如果有什么问题,欢迎联系我 ben121011@126.com

总结

以上是编程之家为你收集整理的jquery选中radio或checkbox的正确姿势全部内容,希望文章能够帮你解决jquery选中radio或checkbox的正确姿势所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478