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规范的 getAttribute 和 setAttribute进行获取修改，而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);

 

Ｍore

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

如果有什么问题，欢迎联系我 [e-mail]