Mise à jour des classes d'élément enfant lorsque l'utilisateur clique sur une ligne de table

Question

J'ai une table d'options de produit, chacune tr est une option. L'un est sélectionné par défaut, pour en sélectionner un autre, un bouton radio doit être coché avant que le formulaire ne soit soumis. Ceci est assez facile mais le tr entier doit être cliquable et vérifie le bouton radio en conséquence.

Je pense J'ai réussi à obtenir ce travail en utilisant le script ci-dessous:

$('.product-options tr').click(function() { 
    $(this).find('td input[type=radio]').prop('checked', true); 
}); 

En plus de cela, je aussi besoin d'ajouter une classe de .selected au tr. J'ai essayé avec le code suivant mais j'ai également besoin de vérifier si un autre tr a déjà une classe de .selected et l'enlever. Il est évident que cela ne fera basculer la classe que si vous cliquez sur le même bouton radio. C'est là que ma connaissance limitée de javascript tombe. Quelqu'un peut-il aider? Enfin, j'utilise aussi un plugin appelé uniform.js qui permet de sélectionner/radio/checkboxes pour être entièrement personnalisable. Comme cela enveloppe un div puis un span autour de l'entrée radio, une classe de .checked est ajoutée à l'étendue pour basculer le style coché/non coché. Cela ne change que si vous cliquez directement sur l'entrée. Donc, je vais aussi avoir besoin de prendre en compte un peu de script similaire à la classe tr.selected lorsque l'on clique sur une partie du tr, le bouton radio personnalisé a également une classe mise à jour.

Pour majoration de référence pour le javascript généré radio est:

<div class="radio"> 
    <span> 
     <input type="radio" name="" /> 
    </span> 
</div> 

EDIT: Voici un CodePen avec uniform.js inclus qui devrait démontrer la question (s) mieux:

http://codepen.io/moy/pen/yeGRmO

Merci, j'espère vraiment que quelqu'un pourra vous aider. Il semblait assez simple ... mais comme il est «couches», je suis un peu perdu! :)

Answer 1

Si je comprends bien, vous pouvez simplement accéder aux frères et sœurs du tr et mettre la radio cochée sur false.

$('.product-options tr').click(function() { 
    $(this).find('td input[type=radio]').prop('checked', true); 
    $(this).toggleClass('selected', true); 
    $(this).siblings().find('td input[type=radio]').prop('checked', false); 
    $(this).siblings().removeClass('selected'); 
}); 

Ceci devrait trouver toutes les radios et les mettre toutes sur false, à l'exception de la ligne sur laquelle vous avez cliqué.

MISE À JOUR

Pour travailler avec l'uniforme, vous pouvez appeler directement $.uniform.update() lors de la modification des propriétés.

$(function() { 
    $('input[type="radio"]').uniform(); 

    $('.product-options tr').click(function() { 
     var tr = $(this), 
      radio = tr.find('td input[type=radio]'), 
      siblings = tr.siblings(), 
      otherRadios = siblings.find('td input[type=radio]'); 

     tr.addClass('selected'); 
     siblings.toggleClass('selected', false); 

     $.uniform.update(radio.prop('checked', true)); 
     $.uniform.update(otherRadios.prop('checked', false)); 
    }); 
}); 

DEMO

Answer 2

Essayez ceci:

$('.product-options tr').click(function() { 
      $(this).find('td input[type=radio]').prop('checked', true); 
      $(this).closest('table').find('tr.selected').find('span.checked').removeClass('checked'); 
      $(this).closest('table').find('tr.selected').removeClass('selected'); 
      $(this).addClass('selected'); $(this).find('td:last').find('span').addClass('checked'); 
     }); 

Check This Link