JQuery Bascule seulement 1 élément et les autres ne sont pas cliqués

Question

Ok donc j'ai ce Jquery qui va basculer quelques boutons radio sur la page. Je le veux donc quand quelqu'un clique sur l'un des boutons radio les autres ne sont pas cliqués. Actuellement, la façon dont je l'ai ils peuvent sélectionner 3 à la fois et j'ai besoin d'agir comme un bouton radio régulière que l'on est cliquée et les autres ne sont pas

jQuery:

$(function() { 
    $('.box-ul .btn .dot').click(function() { 
    $(this).toggleClass('clicked'); 
    }); 
}); 

HTML:

<div class="box-ul box-video right"> 
    <ul> 
     <li><span class="yes"></span><p>Easy to Use</p></li> 
     <li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li> 
     <li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li> 
     <li class="btn btn-expanded"> 
      <div class="btn-t"> 
      <span class="dot left"></span> 
      <p class="left">Expanded<br /> 
      <span>This is the extend button It has space for slightly more info.</span> 
      </p> 
      <div class="cl">&nbsp;</div> 
      </div> 
     </li> 
     <li class="btn"> 
      <div class="btn-t"> 
      <span class="dot left"></span> 
      <p class="left">Green Doggies</p> 
      <div class="cl">&nbsp;</div> 
      </div> 
      </li> 
     <li class="btn"> 
      <div class="btn-t"> 
      <span class="dot left"></span> 
      <p class="left">Email Support</p> 
      <div class="cl">&nbsp;</div> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

Utilisez la classe .removeClass() sur tous les éléments correspondants qui ne sont pas celui que vous avez cliqué sur le premier, comme ceci:

$('.box-ul .btn .dot').click(function() { 
    $('.box-ul .btn .dot').not(this).removeClass('clicked');  
    $(this).toggleClass('clicked'); 
});​ 

You can test it here. Dans ce cas, nous sélectionnons tous les autres éléments '.box-ul .btn .dot' correspondants, en filtrant celui sur lequel nous avons cliqué avec .not(), et en faisant un .removeClass() sur eux. La dernière partie est toujours .toggleClass(), vous pouvez donc désélectionner en cliquant sur l'actif. Si vous ne voulez pas voulez être en mesure de désélectionner (encore plus comme un bouton radio) alors il suffit de changer cela à .addClass().

Answer 2

au lieu d'un .removeClass de couverture() sur tout, je ferais:

$(this).closest('.box-ul').find('.btn .dot').not(this).removeClass('clicked'); 

Cela ne les deselects dans .box-ul du bouton radio cliqué.