web-dev-qa-db-fra.com

Obtenir l'identifiant d'une case à cocher? - jQuery

Hé, je me demande comment obtenir l'id d'une case à cocher lorsqu'elle est cochée.

Voici à quoi ressemblerait probablement mon HTML au début:

<div class="check_filter">

    <div id="filter">
        <input type="checkbox" id="check1" /><label for="check1">Marketing</label>
        <input type="checkbox" id="check2" /><label for="check2">Automotive</label>
        <input type="checkbox" id="check3" /><label for="check3">Sports</label>
    </div>

</div><!-- End check_filter -->

Je suppose que jQuery ressemblerait à ceci:

$(document).ready(function() {    
    $(":checkbox").click(function(){
        var id = $(this).attr('id');

        $.post("index.php", { id: id });
       //return false to ensure the page doesn't refresh
       return false;
    });    
});

J'essaie d'obtenir l'ID de l'élément vérifié, puis de poster cet ID dans une requête mysql pour récupérer les résultats de l'ID dans la base de données.

Merci pour toute aide à ce sujet.

jquerycheckbox
16
DonDraper

Vous voulez probablement l'événement change ici, comme ceci:

$(function() {
  $(":checkbox").change(function(){
    $.post("index.php", { id: this.id, checked: this.checked });
  });    
});

Ceci s'affiche chaque fois qu'une case à cocher change et permet au côté PHP de connaître l'ID et s'il est coché ou non).

17
Nick Craver

La jQuery que vous avez fournie fonctionne bien? Vous devriez probablement supprimer le return false à indique que la case a été cochée.

EDIT: $. Post () est pour une demande asynchrone (technique AJAX) donc il n'y aura pas de rafraîchissement de page.

EDIT 2: Vous voudrez peut-être également voir si la case à cocher est cochée (pas seulement si elle a été cliquée):

$(document).ready(function() {    
  $(":checkbox").click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.post("index.php", { id: id, isChecked: isChecked });
    });    
});
8
TheCloudlessSky

Vous pouvez utiliser le sélecteur :checkbox Puis vérifier le id et les propriétés vérifiées de l'élément DOM comme ceci:

var id = $(this).find(":checkbox")[0].id;var isChecked = $(this).find(":checkbox")[0].checked;

2
Jonathan Burgos Gio

Vous pouvez mieux utiliser jQuery get au lieu de post. Il vous permet de gérer la sortie de votre demande: http://api.jquery.com/jQuery.get/

Exemple:

$(document).ready(function() {    
  $(':checkbox').click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.get(
          'getcheckbox.php', 
          { id: id, isChecked: isChecked },
          function(data) {
            //return value in getcheckbox.php and use it in on complete function
            var result = data;
          }
        );
    });    
});
1
filster

Pourquoi ai-je seulement besoin de cela pour le nom d'une case à cocher, mais $ (ceci) pour accéder à la valeur

$('input:checkbox').change( function() {
        console.log("here i am: " + this.name + " value = " + $(this).val() );
        }
    );
0
Simon H