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

Posted 2023-02-22

【中文标题】JQuery 正在更改复选框值，但复选框未显示为选中状态

【英文标题】：JQuery is changing checkbox value but the checkbox is not displaying as checked

【发布时间】：2013-08-08 12:06:10

【问题描述】：

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

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

第一次，它显示选中的复选框。但是当我下次单击选择它时，html代码中的复选框checked="checked" 的值会更新（我通过firebug进行了检查）但复选框未显示为已选中。

【问题讨论】：

如果使用jQuery 1.6+，请使用prop而不是attr，您也可以在jsfiddle上提供代码

【参考方案1】：

几乎正确，只需使用 'checked' 而不是 true：

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

更新：或者，您可以将其与较新的 JQuery 版本一起使用：

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

【讨论】：

第一个没有在服务器上为我注册，必须使用第二个。

【参考方案2】：

使用.attr()，您可以在 DOM 树中设置属性的值。取决于浏览器、浏览器版本和 jQuery 版本（尤其是 1.6），这并不总是能达到预期的效果。

使用.prop()，您可以操作属性（在本例中为“检查状态”）。我强烈建议在您的情况下使用.prop()，因此以下内容将正确切换：

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

更多信息，请参考documentation of .prop()。

【讨论】：

我用过 ("#id_of_object").prop('checked', true);更具体地说，使用我想要的 id（不使用类）， find 对我不起作用。谢谢！

谢谢，直到我阅读了您的解决方案，我才明白为什么它没有显示为已选中。

哇哦，我在想.attr 只是.prop 的弃用版本！原来它们是根本不同的！ （虽然我质疑为什么？？）

【参考方案3】：

 $("[id*='" + value + "'] input").prop('checked', false);

attr 也有效（但仅限第一次） 但prop 始终有效。

【参考方案4】：

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

);

【参考方案5】：

虽然在 mozilla 中运行良好，但最初在 chrome 中没有什么对我有用。 后来发现自定义CSS样式导致对勾不可见。

【讨论】：

哈哈，这实际上帮助了我

【参考方案6】：

很简单，解决方法是用 $('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>

【参考方案7】：

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

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

虽然底层状态总是正确更新，但显示不会正确重绘。

这可以解决。

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

请参阅此thread 了解更多信息。