测试用的浏览器是chrome,jquery的版本用了1.11.3和3.2.0
document.getElementById(elementID)["checked"]; //返回true 或者 false
document.getElementById(elementID).checked; //返回true 或者 false
document.querySelector("[checked]"); //返回DOM元素 或 null
document.getElementById(elementID).hasAttribute("checked");//返回true 或者 false
解释
<input type="checkbox"> 和 <input type="radio">
,也就是说我们获取到input元素后可以用[ ] 或 . 的方式查看属性的值,这就是方式一 与 方式二 element.setAttribute(attributename,attributevalue)
来给 input标签的checked属性,随便设置一个值,这里再强调一下,无所谓值是什么,不管是null、false、”“、0,只要有值就是被选中 element.removeAttribute(attributename)
删除checked属 性,这里需要注意的一点就是,这两个方法需要配合使用,removeAttribute(),没法删除用户点击页面上的input元素加上的checked属性,简单的说,如果你 按 F12 能看见这个input标签上有checked属性,removeAttribute(),这个方法就能用,否则不能用 补充 然而说到获取属性,我们一定会想到getAttribute() 方法,返回值是属性的值 或者 null,但是这个方法来获取checked属性的值,并不好用,他有和方法三 一样的缺陷,他始终都只会获取checked属性的初始值,用户在页面上点击是不会改变他的值的!
我们在代码中 设置是 inp被选中 打开页面后 点击inp2 让inp 没选中 但是inp的值并没有发生变化
$(selector).get(0).checked; //返回true 或者 false
$(selector).is(':checked'); //返回true 或者 false
$(selector).attr('checked'); //返回checked 或者 undefined
$(selector).prop('checked'); //返回true 或者 false
解释
.checked
,应该算是js原生的,类似于js原生 方法二 :checked
是jQuery中的选择器 选取所有被选中的元素(复选框或单选按钮)这个方法是推荐使用的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