JQuery 正在更改复选框值，但复选框未显示为已选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18097875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery is changing checkbox value but the checkbox is not displaying as checked
提问by Gaurav
I have a list with a checkbox and some text (like email's inbox). I want to check/uncheck the checkbox when i click anywhere on the list item (row). I have used following code on click event of the row:
我有一个带有复选框和一些文本的列表（如电子邮件的收件箱）。当我单击列表项（行）上的任意位置时，我想选中/取消选中该复选框。我在行的点击事件上使用了以下代码：
$(this).find(".cbx input").attr('checked', true);
For first time, it show the checked checkbox. But when I click select it next time the value of checkbox checked="checked" updates in the html code (i checked through firebug) but the checkbox does not displayed as checked.
第一次，它显示选中的复选框。但是，当我下次单击选择它时，html 代码中的 checkbox checked="checked" 值更新（我通过 firebug 检查），但复选框未显示为已选中。
回答by UweB
With .attr()you set the value of an attribute in the DOM tree. Depending on the browser, browser version and jQuery version (especially 1.6), this does not always have the desired effect.
随着.attr()您在 DOM 树中设置属性的值。根据浏览器、浏览器版本和 jQuery 版本（尤其是 1.6），这并不总是具有预期的效果。
With .prop(), you manipulate the property (in this case, 'checked state'). I strongly recommend using .prop()in your case, so the following will toggle correctly:
使用.prop()，您可以操作属性（在本例中为“已检查状态”）。我强烈建议.prop()在您的情况下使用，因此以下内容将正确切换：
$(this).find(".cbx input").prop('checked', true);
For further information, please refer to the documentation of .prop().
回答by Alex
Almost right, just use 'checked' instead of true:
几乎正确，只需使用“已检查”而不是“真”：
$(this).find(".cbx input").attr('checked', 'checked');
Update: Alternatively, you can use this with newer JQuery versions:
更新：或者，您可以在较新的 JQuery 版本中使用它：
$(this).find(".cbx input").prop('checked', true);
回答by Sergio
Easy, the solution is to use $('xxxxxx').prop('checked', true) or falseTest OK in Jquery 1.11.x.
很简单，解决方案是在Jquery 1.11.x 中使用 $('xxxxxx') .prop('checked', true) 或falseTest OK 。
Cheers
干杯
FULL DEMO CODE EXAMPLE
完整的演示代码示例
Examples: (Code JavaScript checkbox for a table)
示例：（表格的代码 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'));
});
}
Examples: (Code HTML checkbox for a table)
示例：（表格的代码 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>
Example: (Code ComponentHTML use JavaScript)
示例：（代码 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>
回答by Olmstov
This solution did not work for me (ie. Setting the checked state with prop).
这个解决方案对我不起作用（即使用道具设置选中状态）。
$("#checkbox-reminder").prop("checked", true);
While the underlying state always updated correctly, the display would not properly repaint.
虽然底层状态总是正确更新，但显示不会正确重绘。
This can be solved with.
这可以解决。
$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');
See this threadfor more info.
有关更多信息，请参阅此线程。
回答by mohitesachin217
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);
}
});
回答by Suhas Jain
nothing initially worked for me in chrome though it was working fine in mozilla. Later found out that custom CSS styling caused the checkmark to be not visible.
尽管在 mozilla 中运行良好，但最初在 chrome 中对我没有任何作用。后来发现自定义 CSS 样式导致复选标记不可见。
回答by karthickcse
$("[id*='" + value + "'] input").prop('checked', false);
attralso worked (but first time only)
But propalways works.
attr也有效（但仅限第一次）但prop总是有效。
