我需要检查复选框的checked
属性,并使用 jQuery 根据 checked 属性执行操作。
例如,如果选中了年龄复选框,那么我需要显示一个文本框来输入年龄,否则隐藏该文本框。
但是以下代码默认情况下返回false
:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
Age is selected
</div>
如何成功查询checked
属性?
如何成功查询选中的属性?
复选框 DOM 元素的checked
属性将为您提供该元素的checked
状态。
给定您现有的代码,您可以执行以下操作:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
但是,使用toggle
可以有一种更漂亮的方法:
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
使用 jQuery 的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
}
jQuery 1.6 以上
$('#isAgeSelected').prop('checked')
jQuery 1.5 及以下
$('#isAgeSelected').attr('checked')
任何版本的 jQuery
// Assuming an event handler on a checkbox
if (this.checked)
一切归功于西安 。
我正在使用此,这绝对正常:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
注意:如果选中此复选框,它将返回 true,否则未定义,因此最好检查 “TRUE” 值。
采用:
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
从 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")
这为我工作:
$get("isAgeSelected ").checked == true
其中isAgeSelected
是控件的 ID。
另外,@ karim79 的答案也很好。我不确定测试时错过了什么。
注意,这是使用 Microsoft Ajax 而不是 jQuery 的答案
如果使用的是 jquery 的更新版本,则必须使用.prop
方法来解决问题:
$('#isAgeSelected').prop('checked')
如果选中则返回true
,如果未选中则返回false
。我确认了这一点,并且较早地遇到了这个问题。 $('#isAgeSelected').attr('checked')
和$('#isAgeSelected').is('checked')
返回undefined
,对于这种情况,这不是一个有价值的答案。因此,请执行以下操作。
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
希望对您有所帮助:)- 谢谢。
将Click
事件处理程序用于 checkbox 属性是不可靠的,因为在执行事件处理程序本身的过程中, checked
属性可能会更改!
理想情况下,你会希望把你的代码放到一个change
的事件处理程序,例如它被激发每个复选框的值发生改变时(独立于它是如何做的话)。
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});