获取页面中被选中元素的 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(),这个方法就能用,否则不能用


  • 方式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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券