JQuery Include only 1 element and the rest will not be clicked

Question

So, I have this jQuery which will switch to some radio buttons on the page. I want this to be the case when someone clicks on one of the switches, the rest do not click. Currently, as I have, they can choose 3 at a time, and I need it to act like a regular radio button that was clicked on, and the rest weren’t

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

Use the .removeClass() class in all matching elements that were not selected by you first, for example:

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

Here you can test it . In this case, we select all the other relevant elements of '.box-ul .btn .dot' , filtering out the one we clicked on .not() , and do .removeClass() . The last part is still .toggleClass() , so you can deselect it by clicking on the active one. If you do not want to deselect (even more like a radio button), just change it to .addClass() .

Answer 2

Instead of overlaying the cover with .removeClass (), I would do:

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

This only removes those that are in the pressed .box-ul switch.