Make radio buttons checked /unchecked

Question

 $("input[type='radio']").each(function() { if ($(this).is(":checked")) { $(this).css('background', 'blue'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" data="cool" name="cool" checked="checked"> <input type="radio" data="cool" name="cool"> <input type="radio" data="cool" name="cool"> 

My approach is to first check if my inputs are :checked and if they are, put some CSS class with the background color. I achieve that, the next thing I want to is to remove that :checked when users click on radio button or any other (better) idea. After the form is submitted, this code checks if inputs are :checked , the problem is when I want to select another radio button I get something like this:

1 and 2 radio buttons are selected, it should be only 2 :checked

Answer 1

You need to add the else to remove the blue color like :

$("input[type='radio']").each(function () {
   if ($(this).is(":checked")) {
      $(this).css('background', 'blue');
   }else{
     $(this).css('background', 'white');
   }
});

You could also attach a click event for those radios like :

$("body").on("click", "input[type='radio']", function () {
    $("input[type='radio']").css('background', 'white');
    $(this).css('background', 'blue');
});

Answer 2

The issue with your JS is that you never remove the class from any of the unselected checkboxes. Also note that each() only runs when the page loads (assuming you've not placed it in an event handler, but the question doesn't show that), so you need to instead run your logic in a change event handler:

var $radio = $("input[type='radio']").on('change', function() {
  $radio.removeClass('blue');
  $(this).toggleClass('blue', this.checked);
});

That being said, what you're trying to do can be achieved more simply by using CSS:

 input { visibility: hidden; } input:before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #CCC; visibility: visible; } input:checked:before { background-color: blue; } 

 <input type="radio" data="cool" name="cool" checked="checked"> <input type="radio" data="cool" name="cool"> <input type="radio" data="cool" name="cool"> 

Answer 3

I think the issue with your code is that you are using each event instead of change or click event. It means that you are trying to change the color of your radio button, even before user has performed any action. Read the following code, this will solve the issue of submitting the form and also customizing the radio button:

 $(".radio-button").click(function() { $(this).addClass("blue-background"); $(this).siblings().removeClass("blue-background"); var radioID = $(this).data('radio'); $('#' + radioID).attr("checked", "checked"); if ($('#' + radioID).siblings(":checked")) { $('#' + radioID).siblings().removeAttr("checked"); } }); 

 .blue-background { background-color: blue; } input[type='radio'] { visibility: hidden; } .radio-button { height: 15px; width: 15px; margin: 5px; border-radius: 50%; display: inline-block; border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <input type="radio" id="radio1" data="cool" name="cool" checked="checked"> <input type="radio" id="radio2" data="cool" name="cool"> <input type="radio" id="radio3" data="cool" name="cool"> <div class="radio-button" data-radio="radio1"></div> <div class="radio-button" data-radio="radio2"></div> <div class="radio-button" data-radio="radio3"></div> </div> 

I hope this was helpful.