Toggle CSS class depending on the radio button status

Question

I'm working on a better user interface and I tried to achieve a way to visualize radio buttons. I got the following code to the point where the radio button input will be checked and the class highlightedBox added on color click.

How can I manage to toggle the class highlightedBox depending on the radio button status? Now toggle get triggered on click but this solution wont work if the user decides to deselect the color button by selecting another color.

I know the current status of the code only works for a single change per color. If you want to select the same color again the checked value wont be set. But this is another problem and I'll try to fix this later on.

 $('#wireColorSelect #wireBox').click(function(){ var checkbox = $(this).parent().find(".cbox"); var wireDOM = $(this).parent().find("#wireBox"); checkbox.attr('checked', .checkbox;attr('checked')). wireDOM;toggleClass('highlightedBox'); });

 .wireBox{ border: 1px solid; height:50px; width:50px; opacity: 0.5; }.white{ background-color: White; }.red{ background-color: red; }.blue{ background-color: blue; }.yellow{ background-color: yellow; }.highlightedBox { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wireColorSelect"> <div class="flex-row flex-xs-3"> <div class="flex-xs-3 no-padding"> <div id="wireBox" class=" white wireBox"></div> <input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div id="wireBox" class="red wireBox"></div> <input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div id="wireBox" class="yellow wireBox"></div> <input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div id="wireBox" class="blue wireBox"></div> <input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" /> </div> </div> </div>

Answer 1

You can use .not() to exclude element ie: div which is not currently clicked by user and removeClass from them.

Demo Code :

 $('#wireColorSelect.wireBox').click(function() { var checkbox = $(this).parent().find(".cbox"); var wireDOM = $(this) checkbox.prop('checked', checkbox.is(":checked")? false: true); wireDOM.toggleClass('highlightedBox'); //remove checked from other checkboxes $(".cbox").not(checkbox).prop('checked', false); //remove highlight class from other $(".wireBox").not(wireDOM).removeClass("highlightedBox") });

 .wireBox { border: 1px solid; height: 50px; width: 50px; opacity: 0.5; }.white { background-color: White; }.red { background-color: red; }.blue { background-color: blue; }.yellow { background-color: yellow; }.highlightedBox { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wireColorSelect"> <div class="flex-row flex-xs-3"> <div class="flex-xs-3 no-padding"> <div class=" white wireBox"></div> <input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div class="red wireBox"></div> <input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div class="yellow wireBox"></div> <input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" /> </div> <div class="flex-xs-3 no-padding"> <div class="blue wireBox"></div> <input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" /> </div> </div> </div>