Javascript JQuery正在更改复选框值，但复选框未显示为选中状态

我有一个带有复选框和一些文本的列表（比如电子邮件的收件箱）。我想在单击列表项（行）的任意位置时选中/取消选中该复选框。我在行的单击事件中使用了以下代码：

$(this).find(".cbx input").attr('checked', true);

---

这是第一次显示复选框。但是，当我下次单击“选择”时，复选框checked=“checked”的值会在html代码中更新（我通过firebug进行了检查），但复选框不会显示为选中状态。

几乎正确，只需使用“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);

有关更多信息，请参阅

attr

也有效（但仅限于第一次）

---

但是

prop

总是有效的。

虽然在mozilla中运行良好，但chrome一开始对我来说什么都不起作用。

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);
}
});

---

后来发现自定义CSS样式导致复选标记不可见。

很简单，解决方法是使用$（'xxxxxx'）.prop（'checked'、true）或在Jquery 1.11.x中测试OK

干杯

完整演示代码示例

示例：（为表格编码JavaScript复选框）

示例：（为表格编码HTML复选框）

引擎
疫苗
#########
#######
#########
#######
#########
#######

示例：（代码组件HTML使用JavaScript）

选择权

---

此解决方案对我不起作用（即使用prop设置选中状态）

虽然基础状态始终正确更新，但显示不会正确重新绘制

这可以通过以下方法解决

$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');

---

更多信息请参见此。

如果使用

jQuery 1.6+

，请使用

prop

而不是

attr

，并且您还可以提供我使用的

jsfiddle

上的代码（“对象的id”）。prop（'checked'，true）；更具体地说，使用我想要的id（不使用类），和find对我不起作用。谢谢谢谢，直到我读了你的解决方案，我才明白为什么它没有显示为checked。哦，哇，我在想。attr只是.prop的一个弃用版本！！事实证明他们根本不同！（尽管我质疑为什么？？？）第一个没有在服务器上为我注册，必须使用第二个。

    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'));
        });
    }

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

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

$("#checkbox-reminder").prop("checked", true);

$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');