JQuery正在更改复选框值,但复选框未显示为已选中

时间:2013-08-07 08:03:19

标签: javascript jquery html checkbox

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

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

第一次显示选中的复选框。但是当我点击下一次选中它时,复选框的值=“已检查”html代码中的更新(我通过firebug检查),但复选框没有显示为已选中。

7 个答案:

答案 0 :(得分:86)

使用.attr()设置DOM树中属性的值。根据浏览器,浏览器版本和jQuery版本(尤其是1.6),这并不总是具有预期的效果。

使用.prop(),您可以操纵属性(在本例中为“已检查状态”)。我强烈建议您使用.prop(),因此以下内容将正确切换:

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

有关详细信息,请参阅documentation of .prop()

答案 1 :(得分:8)

几乎是正确的,只需使用'checked'而不是true:

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

更新:或者,你可以在更新的JQuery版本中使用它:

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

答案 2 :(得分:2)

简单,解决方案是使用$(' xxxxxx') .prop ('已检查', true )或 false 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>

答案 3 :(得分:0)

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

答案 4 :(得分:0)

虽然它在mozilla中工作得很好,但最初没有任何东西可以用于chrome。 后来发现自定义CSS样式导致复选标记不可见。

答案 5 :(得分:0)

这个解决方案对我不起作用(即用prop设置检查状态)。

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

虽然基础状态始终正确更新,但显示将无法正确重绘。

这可以用。

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

有关详细信息,请参阅此thread

答案 6 :(得分:-1)

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

attr也有效(但仅限第一次) 但prop始终有效。