使用jquery检查/取消选中复选框?

时间:2013-07-02 08:09:42

标签: jquery jquery-ui

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

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

在这里,我想检查一下value == 1,然后选中此复选框。否则,它应该保持未选中状态。

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

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}

3 个答案:

答案 0 :(得分:1167)

对于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

因为你知道,在HTML中,它看起来像:

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

但是,您无法信任.attr()方法来获取复选框的值(如果需要)。您必须使用.prop()方法。

答案 1 :(得分:62)

您可以使用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">

答案 2 :(得分:26)

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

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