我有一个带有复选框和一些文本的列表（如电子邮件的收件箱）。当我单击列表项（行）上的任意位置时，我想选中/取消选中该复选框。我在该行的点击事件上使用了以下代码：
$(this).find(".cbx input").attr('checked', true);
第一次，它显示选中的复选框。但是当我下次单击选择它时，html代码中的复选框checked="checked" 的值会更新（我通过firebug进行了检查）但复选框未显示为已选中。
【问题讨论】：
jQuery 1.6+，请使用prop而不是attr，您也可以在jsfiddle上提供代码
标签： javascript jquery html checkbox
几乎正确，只需使用 'checked' 而不是 true：
$(this).find(".cbx input").attr('checked', 'checked');
更新：或者，您可以将其与较新的 JQuery 版本一起使用：
$(this).find(".cbx input").prop('checked', true);
【讨论】：
使用.attr()，您可以在 DOM 树中设置属性的值。取决于浏览器、浏览器版本和 jQuery 版本（尤其是 1.6），这并不总是能达到预期的效果。
使用.prop()，您可以操作属性（在本例中为“检查状态”）。我强烈建议在您的情况下使用.prop()，因此以下内容将正确切换：
$(this).find(".cbx input").prop('checked', true);
更多信息，请参考documentation of .prop()。
【讨论】：
$("[id*='" + value + "'] input").prop('checked', false);
attr 也有效（但仅限第一次）
但prop 始终有效。
【讨论】：
useing **.prop()** it worked for me !
$(document).on("click",".first-table tr",function(e){
if($(this).find('input:checkbox:first').is(':checked'))
{
$(this).find('input:checkbox:first').prop('checked',false);
}else
{
$(this).find('input:checkbox:first').prop('checked', true);
}
});
【讨论】：
虽然在 mozilla 中运行良好，但最初在 chrome 中没有什么对我有用。 后来发现自定义CSS样式导致对勾不可见。
【讨论】：
很简单，解决方法是用 $('xxxxxx').prop('checked', true) 或 false 测试OK在 Jquery 1.11.x 中。
干杯
完整的演示代码示例
示例：（表格的代码 JavaScript 复选框）
function checkswich() {
if ($('#checkbox-select').is(':checked') == true) {
selectTodo();
} else {
deSelectTodo();
}
}
function selectTodo() {
//$('#tabla-data input.ids:checkbox').attr('checked', 'checked');
$('#tabla-data input.ids:checkbox').prop('checked', true);
}
function deSelectTodo() {
//$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked');
$('#tabla-data input.ids:checkbox').prop('checked', false);
}
function invetirSelectTodo() {
$("#tabla-data input.ids:checkbox").each(function (index) {
//$(this).attr('checked', !$(this).attr('checked'));
$(this).prop('checked', !$(this).is(':checked'));
});
}
示例：（表格的代码 HTML 复选框）
<table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th>
<th>Engine</th>
<th><a href="#" class="">Browser</a></th>
<th class="td-actions text-center" style="width: 8%;">Acciones</th>
</tr>
</thead>
<tbody id="tabla-data" class="checkbox-data">
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
</tbody>
</table>
示例：（代码 ComponentHTML 使用 JavaScript）
<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" >
<input type="hidden" name="accion" id="accion">
<div class="btn-group">
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span>
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Options</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="accion()">Action Demo</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" onclick="selectTodo()">Select All</a></li>
<li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li>
<li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li>
</ul>
【讨论】：
这个解决方案对我不起作用（即使用 prop 设置选中状态）。
$("#checkbox-reminder").prop("checked", true);
虽然底层状态总是正确更新，但显示不会正确重绘。
这可以解决。
$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');
请参阅此thread 了解更多信息。
【讨论】：