使用jquery检查/取消选中复选框？ [复制]答案

【问题标题】：check / uncheck checkbox using jquery? [duplicate]使用jquery检查/取消选中复选框？ [复制]
【发布时间】：2013-06-29 12:32:11
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

对于 jQuery 1.6+：

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

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

对于 jQuery

要选中/取消选中复选框，请使用属性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() 方法。

【讨论】：

一个元素被认为是checked，只要它具有checked 的属性，即使它没有值或者值类似于'false'或其他什么。所以$('#myCheckbox').attr('checked', false);不会取消勾选，你需要$('#myCheckbox').removeAttr('checked');。
@xpy .attr("checked",false); 在我的浏览器中工作。
@DanielCook .attr("checked",false); 在我的 Firefox Developer Edition v41.0a2 中有效，但在普通 Firefox v39 和我的 Chrome v43 上无效。
@DanielCook 和@xpy；因此使用prop，因为它更可靠。
$('#myCheckbox').prop('checked', false);然后 $('#myCheckbox').change();

【解决方案2】：

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

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

【讨论】：

这对我不起作用，值未定义。
@Dave 该值是您要比较的任何值。您可以将 value == 1 替换为任何布尔值（true 或 false）。示例：$('#your-checkbox').prop('checked', true);

【解决方案3】：

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

【讨论】：