Récuperer valeur des data d'un élement HTML

Par Muxxable, il y a 9 ans

Javascript

Bonjour,

Je viens vers vous car j'ai un petit soucis avec mon script, j'ai une page qui via PHP genère des informations, le but étant d'avoir des cases à coché, lorsque celle-ci sont checké alors leurs data sont affichées, (name, price) dans une autre div et de plus les prix sont calculés. Le problème étant que je n'arrive pas a récuperer les datas de mes checkbox.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

// PHP affiche la liste des produits <p><span data-name="iPhone" data-price="800">iPhone(800 €) <input type="checkbox" class="checkbox-product order-product"></span></p> <div class="show> // Affiche la liste des data name selectionné avec leurs prix, et calcule les prix </div> $(document).ready(function() { // Si je sellectionne une checkbox, alors je récupérer son data name, price et je l'affiche dans la div #show var checkbox = $('.order-product') if (checkbox = true) { console.log(checkbox.parent().attr('name')); } });

Ce que j'obtiens

J'obtiens uen erreur comme quoi checkbox n'est pas une fonction

Merci pour votre aide

6 réponses

Huggy, il y a 9 ans

Ta variable checkbox est un tableau qui contient tous les éléments qui ont la classe 'order-product'
il faut donc parcourir le tableau pour accèder aux éléments de type checkbox

En principe si tu déclenches un event 'onchange' sur un checkbox, il suffit de récupérer le target
cette méthode est plus propre à mon goût.

Muxxable, il y a 9 ans

Merci pour le coup de main, je vais tenter versle coté du change ;)

Amilor7, il y a 9 ans

Salut,
Alors déjà quelques soucis concernant ton code,

if(checkbox = true)

Ceci n'est pas une opération de comparaison, de plus ta variable checbox est un selecteur, en somme il te renvoit l'élement ou les éléments HTML sous la forme d'un objet jQuery pas la valeur de la checkbox ou si elle est checked.
Pour vérifier si une checkbox est checkée en jQuery on fait

$(element).is(':checked')

Enfin je t'ai fais un exemple fonctionnel pour un élément, ensuite à toi de l'adapter selon tes besoins, lien

Benjamin Derepas, il y a 9 ans

Tu peux déjà rajouter un data-attribut à ta chexbox .

<input type="checkbox" class="checkbox checkbox-product order-product" data-val="800">

Puis :

$(".checkbox").on('change',function(e){ e.preventDefault(); var val = $(this).data('val'); });

Logiquement cette solution devrait fonctionner.

Huggy, il y a 9 ans

@Benjamin t'aurais pas oublié le test du checked
et à quoi sert le preventDefault sur un 'change' ?

Georges Marcus Durand, il y a 9 ans

Tu ne fais pas une comparaison actuellement.

if (checkbox = true) // FAUX if (checkbox == true) // Comparaison