使用jQuery选中/取消选中复选框？

我的页面中有一些输入文本字段，并使用JavaScript显示它们的值。

我使用.set("value","")函数来编辑值，添加一个额外的复选框字段，并传递一个值。

这里我想检查如果value == 1，那么这个复选框应该被选中。否则，它应该保持未选中状态。

我通过使用两个div来做到这一点，但我对此感到不舒服，还有其他解决方案吗？

if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
1167389 次浏览
小开
最佳答案

对于jQuery 1.6+：

. attr（）不推荐用于属性；使用新的. prop（）函数代替：

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

对于jQuery<1.6：

要选中/取消选中复选框，请使用属性checked并更改它。使用jQuery，您可以执行：

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

因为你知道，在超文本标记语言中，它看起来像：

<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->

但是，您不能信任. attr（）方法来获取复选框的值（如果需要）。您将不得不依赖. prop（）方法。

小开

您可以根据值设置复选框的状态：

$('#your-checkbox').prop('checked', value == 1);
小开

您可以使用prop（），因为jQuery 1.6之前，. attr（）方法在检索某些属性时有时会考虑属性值，这可能导致行为不一致。从jQuery 1.6开始，.prop()方法提供了一种显式检索属性值的方法，而.attr()检索属性。

var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);

或简单地说，

$('#checkbox').prop('checked',(value == 1));

片段

$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value==1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">


提交答案