javascript - 检查复选框的选中属性

  显示原文与译文双语对照的内容

我需要检查复选框的checked 属性,并使用 jQuery 属性执行基于checked属性的操作。

例如如果选中了age年龄checkbox复选框,则需要显示文本框以输入年龄,否则隐藏文本框。

但是以下代码默认返回 false:


if($('#isAgeSelected').attr('checked')) {
 $("#txtAge").show();
} else {
 $("#txtAge").hide();
}

如何成功查询 checked 属性?

时间:

"如何成功查询选中的属性"?

复选框的.checked 属性将告诉你元素的checked 状态。

鉴于你现有的代码,你可以这样做:


if(document.getElementById('isAgeSelected').checked) {
 $("#txtAge").show();
} else {
 $("#txtAge").hide();
}

然而,有一个漂亮的方法,使用 toggle :


$('#isAgeSelected').click(function () {
 $("#txtAge").toggle(this.checked);
});

<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>​

小提琴演示

使用 is() 函数的:


if($("#isAgeSelected").is(':checked'))
 $("#txtAge").show();//checked
else
 $("#txtAge").hide();//unchecked

使用 jQuery> 1.6


<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked"/>

//traditional attr
$('#checkMeOut').attr('checked');//"checked"
//new property method
$('#checkMeOut').prop('checked');//true

使用新的属性方法:


if($('#checkMeOut').prop('checked')) {
//something when checked
} else {
//something else when not
}

我正在使用这个,这工作绝对正常:


$("#checkkBoxId").attr("checked")? alert("Checked") : alert("Unchecked");

注意:如果选中复选框,则它将 return true 不定义,因此更好地检查"真"值。

由于 jQuery 1.6,jQuery.attr()的行为已经改变,鼓励用户不要使用它来检索元素状态。 相反,你应该使用 jQuery.prop():


$("#txtAge").toggle(
 $("#isAgeSelected").prop("checked")//for checked attribute it returns true/false;
//return value changes with checkbox state
); 

还有两种其他可能性:


$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

有几种方法可以实现它: .is()


$("#checkkBoxId").is(':checked') 

或者你可以尝试:.prop()


$("#checkkBoxId").prop('checked') 

的jQuery 1.6 +


$('#isAgeSelected').prop('checked')

的jQuery 1.5和更高版本


$('#isAgeSelected').attr('checked')

jQuery 任何版本


//Assuming an event handler on a checkbox
if (this.checked)

全部贷记:http://stackoverflow.com 426276/443427

我决定在不使用jQuery的情况下发布一个完全相同的问题。 我只是一个叛逆者。


var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

//Just because of IE <333
ageCheckbox.onchange = function() {
//Check if the checkbox is checked, and show/hide the text field.
 ageInput.hidden = this.checked? false : true;
};

首先通过它们的标识获取两个元素。 然后分配 onchange checkboxe事件的一个函数,检查复选框是否有检查和设置 hidden 属性的年龄适当的文本字段。 在这个例子中使用三元运算符。

这里是一个 fiddle的,用于测试它。

Addendum

如果 跨浏览器 兼容性是一个问题,那么我建议设置css display 属性没有和内联 。


elem.style.display = this.checked? 'inline' : 'none';

较慢但 跨浏览器 兼容。

我这里可以工作:


$get("isAgeSelected").checked == true

其中 isAgeSelected 是控件的标识。

同时,@karim79's 回答的工作很好。 我不确定在测试它时我错过了什么。

注意,这不是回答微软使用ajax,jquery

在checkbox属性中使用 Click 事件处理程序是不可靠的,因为 checked 属性可以在事件处理程序本身的执行过程中更改 ! 理想情况下,你想要把你的代码到一个 change 触发事件处理程序,如它每次 changed(independent of how it's done so) 复选框的值。


$('#isAgeSelected').bind('change', function () {

 if ($(this).is(':checked'))
 $("#txtAge").show();
 else
 $("#txtAge").hide();

});

...