您的位置:首页 > Web前端 > JQuery

获取、设置input的checked属性:JQuery VS Javascript

2016-11-15 00:00 627 查看
jquery中应使用prop方法来获取和设置checked属性,不应该使用attr。原因如下:

1.JQuery:prop方法获取、设置checked属性

<input type="checkbox" name="boy" onclick="CheckThis(this)"/>

function CheckThis(obj){
if($(obj).prop("checked")){//获取checked属性
$("input[name='boy']").prop("checked",true);//设置checked属性
}else{
$("input[name='boy']").prop("checked",false);//设置checked属性
}
}

当input的checkbox设置了checked属性时,无论checked=“”或者checked=“checked”,$(obj).prop(“checked”)的结果都是true;当input的checkbox没设置checked属性时,$(obj).prop("checked")的结果都false。

2.JQuery:attr方法获取、设置checked属性

当input初始化未定义checked属性,则不管当前是否选中,$("input[name='boy']").attr("checked")都会返回“undefined”。

当input初始化定义了checked属性,无论checked=“”或者checked=“checked”,当前checkbox都处于选中状态,$("input[name='boy']").attr("checked")都会返回“checked”。

说明:

jquery版本原因:jquery-1.4.1.min.js、jquery-1.4.2.min.js可以用attr方法正确地获取或设置checkbox的checked属性,但是高版本,例如:1.10.2.min.js就不能用attr方法正确地获取或设置checkbox的checked属性。

3.JavaScript:设置checked属性

<input type="checkbox" name="checkCompany" id=“dog”/>京东
<input type="checkbox" name="checkCompany" id=“cat”/>天猫
<input type="checkbox" name="checkCompany" id=“baby”/>淘宝

var selectName = document.getElementsByName('checkCompany');
for(var i = 0;i<selectName.length;i++){
selectName[i].checked = true;//or false 设置checked属性
}

4.其他实用举例:取所有选中input的value值

var ipt = $('#qxTable').find('input[type="checkbox"]');
var id_string = [];
for (var i = 0; i < ipt.length; i++) {
if (ipt.eq(i).prop("checked") == true) {
id_string.push(ipt.eq(i).val());
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: