web-dev-qa-db-ja.com

JQueryはチェックボックスの値を変更していますが、チェックボックスはチェック済みとして表示されていません

チェックボックスとテキスト（メールの受信トレイなど）を含むリストがあります。リストアイテム（行）の任意の場所をクリックすると、チェックボックスをオン/オフにします。行のクリックイベントで次のコードを使用しました。

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

初めて、チェックボックスが表示されます。しかし、次にクリックすると、チェックボックスchecked = "checked"の値がhtmlコードで更新されます（firebugでチェックされます）が、チェックボックスはチェックされたように表示されません。

javascriptjqueryhtmlcheckbox
34
Gaurav

.attr()を使用して、DOMツリーの属性の値を設定します。ブラウザー、ブラウザーのバージョン、jQueryのバージョン（特に1.6）によっては、これが常に望ましい効果を発揮するとは限りません。

.prop()を使用して、プロパティを操作します（この場合、「チェック状態」）。あなたの場合は.prop()を使用することを強くお勧めします。そうすると、以下が正しく切り替わります。

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

詳細については、 。prop（）のドキュメント を参照してください。

87
UweB

ほぼ正しい、trueではなく 'checked'を使用するだけです：

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

更新：または、これを新しいJQueryバージョンで使用できます。

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

簡単な解決策は、$（ 'xxxxxx'）。prop（ 'checked'、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>

例：（コードコンポーネントHTMLは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>
2
Sergio
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);
}
});
0
mohitesachin217

chromeでは最初はうまくいきませんでしたが、mozillaではうまくいきました。後でカスタムCSSスタイルがチェックマークを表示しないことがわかりました。

0
Suhas Jain

この解決策は私にはうまくいきませんでした（つまり、propでチェック状態を設定します）。

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

基礎となる状態は常に正しく更新されますが、ディスプレイは適切に再描画されません。

これは解決できます。

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

詳細は thread をご覧ください。

0
Olmstov