Alex的博客

本博客的文章均为原创,是本人从事行业多年来所遇见一些小问题的解决心得,希望可以帮助到大家!



jquery attr方法获取input的checked属性问题

问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 

1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase 

复制代码

代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()">全选 

function checkAll() 

var checkedOfAll=$("#selectAll").prop("checked"); 

alert(checkedOfAll); 

$("input[name='procheck']").prop("checked", checkedOfAll); 

2.如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$("#selectAll").attr("checked")都会返回undefined; 

复制代码

代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()" >全选 

如果当前input中初始化已定义checked属性,则不管是否选中,$("#selectAll").attr("checked")都会返回checked. 

复制代码

代码如下:

<input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选 

function checkAll() 

var checkedOfAll=$("#selectAll").attr("checked"); 

alert(checkedOfAll); 

$("input[name='procheck']").attr("checked", checkedOfAll); 

总结,如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.

$(this).prop("checked")获取这个这个元素的checked状态

inputs.prop("checked",true)设置inputs对象中所有的checked为true

inputs.prop("checked",false)设置inputs对象中所有的checked为false


$(this).prop("checked")==true?inputs.prop("checked",true):inputs.prop("checked",false);



jQuery.attr  获取/设置对象的属性值,如:

$("input[name='chk_list']").attr("checked");     //读取所有name为'chk_list'对象的状态(是否选中)

$("input[name='chk_list']").attr("checked",true);      //设置所有name为'chk_list'对象的checked为true

再如:

$("#img_1").attr("src","test.jpg");    //设置ID为img_1的<img>src的值为'test.jpg'

$("#img_1").attr("src");     //读取ID为img_1的<img>src值

 



浏览629  评论0  Alex于 2016-9-21 10:34
发言