1

$("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:

a busy cat

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

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
MihicaStok
  • 113
  • 1
  • 1
  • 9

3 Answers3

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');
});
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • thank you. Now I can't select the radio button. It set background color to white even if radio is checked="checked" – MihicaStok May 28 '19 at 10:50
  • now I can select 1 input. I have 15 radio buttons, but with this code I can select only one. – MihicaStok May 28 '19 at 11:12
  • You've radio button it selects one a time, isn't this what you want? – Zakaria Acharki May 28 '19 at 11:13
  • I have a form and first off all I need to choose some radio buttons, after that I submit the form. When the page reloads I check if my inputs are: checked, if they are it set background color. That's all fine, but when I want to change the radio button from 1 to 2 I get checked on both radios. Image above. – MihicaStok May 28 '19 at 11:18
  • Here's the updated fiddle, https://jsfiddle.net/z6fLk1pa/ You're not referring in the OP that you have a separated group of radio buttons. – Zakaria Acharki May 28 '19 at 13:06
1

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">
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • thank you. When the form is submitted, this code does not check if there is: checked to input? – MihicaStok May 28 '19 at 10:56
  • To do that you can check the number of checked inputs: https://stackoverflow.com/questions/15530582/check-if-a-radio-button-is-checked-jquery – Rory McCrossan May 28 '19 at 10:57
  • There are a few more issues too, such as, he hasn't used click/change event, rather he is using each event, meaning that the user has never clicked the radio buttons actually, so how will the right values get submitted after submitting the form. – Code_Ninja May 28 '19 at 11:34
  • Customization and color are secondary. – Code_Ninja May 28 '19 at 11:34
  • Given that the point of the logic in the question is entirely about changing the background of the radio is argue that customisation and color is the entire point. Your point about the use of each is valid though – Rory McCrossan May 28 '19 at 11:37
  • @RoryMcCrossan, I have updated my answer, let me know if I am still missing something. – Code_Ninja May 28 '19 at 11:52
  • @RoryMcCrossan, basically my question simulates the situation after form is submitted. I have some radios that are checked. This code checks if inputs have :checked and sets background color. The problem is when I want to click on another radio button, this :checked is not removed and I end up with 2 radios that have same color. If you know what I mean. – MihicaStok May 28 '19 at 11:55
0

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.

Code_Ninja
  • 1,729
  • 1
  • 14
  • 38