JQuery est en train de changer de case à cocher de la valeur, mais la case n'est pas l'affichage en tant que bagages

J'ai une liste avec une case à cocher et un peu de texte (comme les e-mails de la boîte de réception). Je veux cocher/décocher la case quand je clique n'importe où sur l'élément de liste (ligne). J'ai utilisé le code suivant dans l'événement click de la ligne:

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

Pour la première fois, c'est montrer l'objet d'une case à cocher. Mais lorsque je clique sur sélectionner la prochaine fois la valeur de la case checked="checked" mises à jour dans le code html (j'ai vérifié via firebug) mais la case à cocher n'apparaît pas en tant que bagages.

  • Utilisation prop au lieu de attr si vous utilisez jQuery 1.6+ et peut également vous fournir le code sur jsfiddle
InformationsquelleAutor Gaurav | 2013-08-07
  1. 86

    Avec .attr() vous définissez la valeur d'un attribut dans l'arborescence DOM. En fonction de la version du navigateur et la version jQuery (surtout 1.6), ce n'est pas toujours l'effet désiré.

    Avec .prop(), vous pouvez manipuler la propriété (dans ce cas-ci, vérifié l'état"). Je recommande fortement d'utiliser .prop() dans votre cas, donc la suite va basculer correctement:

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

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

    • +1 pour l'explication et le lien. Vous m'avez sauvé.
    • J'ai utilisé ("#id_of_object").prop('checked', true); pour être plus précis, et trouver ne fonctionne pas pour moi avec l'id que je voulais (pas d'utilisation de la classe). Merci!
    • Merci, je ne comprenais pas pourquoi elle ne s'affiche pas en tant que bagages jusqu'à ce que j'ai lu de vos solutions.
    • Oh wow, et ici, je pensais que .attr était juste une version obsolète de .prop!! Il s'avère qu'ils sont fondamentalement différents! (bien que je me demande pourquoi??)
    InformationsquelleAutor UweB
  2. 8

    Presque droit, il suffit d'utiliser "cochées" au lieu de la vérité:

    $(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);
    • Oui, le "prop" a parfaitement fonctionné pour mon cas. Merci!
    • 1er ne vous inscrivez pas pour moi sur le serveur, il fallait utiliser 2ème.
    InformationsquelleAutor Robert
  3. 2

    Facile, la solution est d'utiliser $("xxxxxx").prop('checked', vrai) ou faux Test OK dans Jquery 1.11.x.

    Acclamations

    DÉMO EXEMPLE DE CODE

    Exemples: (Code JavaScript case d'un tableau)

        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: (Code HTML checkbox pour une table)

               <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 l'utilisation de 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>

    InformationsquelleAutor Sergio
  4. 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);
}
});
    InformationsquelleAutor mohitesachin217
  5. 0

    rien n'a d'abord travaillé pour moi dans chrome, mais ça marchait très bien sous mozilla.
    Découvert plus tard que le style custom CSS causé la coche à ne pas être visible.

    InformationsquelleAutor Suhas Jain
  6. 0

    Cette solution ne fonctionne pas pour moi (c'est à dire. Réglage de l'état coché avec prop).

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

    Alors que l'état sous-jacent toujours mis à jour correctement, l'écran ne serait pas correctement repeindre.

    Cela peut être résolu avec.

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

    Voir ce fil pour plus d'info.

    InformationsquelleAutor Olmstov
  7. -1
     $("[id*='" + value + "'] input").prop('checked', false);

    attr également travaillé (mais la première fois seulement)
    Mais prop fonctionne toujours.

    InformationsquelleAutor karthickcse