web-dev-qa-db-fra.com

JQuery change la valeur de la case à cocher mais la case à cocher ne s'affiche pas comme cochée

J'ai une liste avec une case à cocher et du texte (comme la boîte de réception de l'e-mail). Je souhaite cocher/décocher la case lorsque je clique n'importe où sur l'élément de liste (ligne). J'ai utilisé le code suivant lors de l'événement de clic de la ligne:

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

Pour la première fois, il affiche la case cochée. Mais lorsque je clique, sélectionnez-la la prochaine fois que la valeur de checkbox checked = "checked" est mise à jour dans le code html (j'ai vérifié via firebug) mais la case à cocher ne s'affiche pas comme cochée.

javascriptjqueryhtmlcheckbox
34
Gaurav

Avec .attr() vous définissez la valeur d'un attribut dans l'arborescence DOM. Selon le navigateur, la version du navigateur et la version de jQuery (en particulier 1.6), cela n'a pas toujours l'effet souhaité.

Avec .prop(), vous manipulez la propriété (dans ce cas, 'état vérifié'). Je recommande fortement d'utiliser .prop() dans votre cas, donc les éléments suivants basculeront correctement:

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

Pour plus d'informations, veuillez vous référer à la documentation de .prop () .

87
UweB

Presque à droite, utilisez simplement 'vérifié' au lieu de vrai:

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

Mise à jour: Alternativement, vous pouvez l'utiliser avec les nouvelles versions de JQuery:

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

Facile, la solution consiste à utiliser $ ('xxxxxx') . Prop ('vérifié', vrai) ou faux Testez OK dans - Jquery 1.11.x.

À votre santé

EXEMPLE DE CODE DEMO COMPLET

Exemples: (Case à cocher Code JavaScript pour une table) 

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

Exemples: (Case à cocher Code HTML pour un tableau) 

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

Exemple: (Code ComponentHTML utilise 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

rien ne fonctionnait initialement pour moi en chrome bien que cela fonctionnait bien dans mozilla. Plus tard, j'ai découvert que le style CSS personnalisé faisait que la coche n'était pas visible.

0
Suhas Jain

Cette solution n'a pas fonctionné pour moi (c'est-à-dire la définition de l'état vérifié avec prop).

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

Bien que l'état sous-jacent soit toujours mis à jour correctement, l'affichage ne serait pas correctement repeint.

Cela peut être résolu avec.

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

Voir ceci thread pour plus d'informations.

0
Olmstov