获取页面中被选中元素的 JS原生方法 与 jQuery方法 分析

说明

测试用的浏览器是chrome，jquery的版本用了1.11.3和3.2.0

js 原生方法

• 方法一：

document.getElementById(elementID)["checked"]; //返回true  或者  false

• 方法二：

document.getElementById(elementID).checked;  //返回true  或者  false

• 方法三：(有缺陷)

document.querySelector("[checked]");  //返回DOM元素 或 null

• 方法四：(有缺陷)

document.getElementById(elementID).hasAttribute("checked");//返回true  或者  false

解释

• checked 属性适用于 <input type="checkbox"> 和 <input type="radio">,也就是说我们获取到input元素后可以用[ ] 或 . 的方式查看属性的值，这就是方式一 与 方式二
• 方式三 是通过选择器的方式获取到元素，再获取属性值，但是这里有一个坑，当再input标签中写了checked属性时，可以获取到值，但是如果没有写，而是在页面上让用户点击input 然后再用这种方式获取值，是获取不到的，默认只能获取初始值
  • 这里说一下，checked属性，只要input标签有checked属性就是被选中的，无所谓值是什么，所以我们还可以通过element.setAttribute(attributename,attributevalue)来给 input标签的checked属性，随便设置一个值，这里再强调一下，无所谓值是什么，不管是null、false、”“、0，只要有值就是被选中
  • 如果需要不被选中，我们可以通过 element.removeAttribute(attributename)删除checked属 性，这里需要注意的一点就是，这两个方法需要配合使用，removeAttribute()，没法删除用户点击页面上的input元素加上的checked属性，简单的说，如果你 按 F12 能看见这个input标签上有checked属性，removeAttribute()，这个方法就能用，否则不能用

有checked属性时

有checked属性测试

没有checked属性时

这里写图片描述

• 方式4 是先获取元素，在判断他是不是有 checked 属性，但是同样他有和方法三 一样的缺陷

补充 然而说到获取属性，我们一定会想到getAttribute() 方法，返回值是属性的值 或者 null，但是这个方法来获取checked属性的值，并不好用，他有和方法三 一样的缺陷，他始终都只会获取checked属性的初始值，用户在页面上点击是不会改变他的值的！

这里写图片描述

我们在代码中 设置是 inp被选中 打开页面后 点击inp2 让inp 没选中 但是inp的值并没有发生变化

这里写图片描述

这里写图片描述

jquery方法：

• 方法一：

$(selector).get(0).checked; //返回true 或者 false

• 方法二：

$(selector).is(':checked');  //返回true 或者 false

• 方法三：（有缺陷）

$(selector).attr('checked');  //返回checked 或者 undefined

• 方法四：

$(selector).prop('checked');  //返回true 或者 false

解释

• 方法一 严格来说，好吧，不能算是jQuery的方法，这个方法先通过jQuery获取元素，但这里获取的是一个jQuery对象，所以又通过get()方法转成了DOM元素，（$(selector).get(index); get() 方法获取由选择器指定的 DOM 元素），后面这个 .checked，应该算是js原生的，类似于js原生 方法二
• 方法二 is() 方法用于查看选择的元素是否匹配选择器，:checked 是jQuery中的选择器 选取所有被选中的元素（复选框或单选按钮）这个方法是推荐使用的jQuery方法
• 方法三 这个方法不推荐使用，缺陷和上面js方法中提到的缺陷是一样的
• 方法四 这个方法非常推荐使用 prop() 方法设置或返回被选元素的属性和值。具体使用方法可以自己查一下 1.6版本之后有了prop() 这个方法，查看jQuery源码 看到这个方法中写道 return ( elem[ name ] = value )和return elem[ name ] 这里我们可以理解为document.getElementById(elem)[name] = value，也就是上面说的js原生方法一

总结

获取页面被选中元素的方法有很多，最后这里推荐几种简单实用的 js原生方法

• 方法一：

document.getElementById(elementID)["checked"]; //返回true  或者  false

• 方法二：

document.getElementById(elementID).checked;  //返回true  或者  false

jQuery方法

• 方法一：

$(selector).get(0).checked; //返回true 或者 false

• 方法二：

$(selector).is(':checked');  //返回true 或者 false

• 方法三：

$(selector).prop('checked');  //返回true 或者 false