Radio buttons are not switching

Question

I have radio buttons and one of them :checked and they have the same name. When I click another radio button they are both selected.

My code is:

<input name="a" type="radio">
<input name="a "type="radio" checked>

JS

$("input[type='radio']").each(function () {
    if ($(this).is(":checked")) {
    $(this).addClass("some");
   }
 });

CSS

  .some {
      background-color:#06c!important;
  }

My approach is to first check if my inputs are :checked and if they are, put some css class with background color. I achieve that, the next thing I want to is remove that :checked when users click on radio button or any other (better) idea. Right now both radio buttons are selected. Can anybody help me with this?

Fiddle:

https://jsfiddle.net/0ns58xcq/

Check your second radio. You used your quotations incorrectly. it must be name="a" and then space between radio and that name attribute. — Mosia Thabo, May 27 '19 at 10:02

score 3 · Answer 1 · answered May 27 '19 at 09:35

Look at your markup:

<input name="a" type="radio">
<input name="a "type="radio" checked>
              ^
              ----- There is a space

Remove the space and it should work.

<input name="a" type="radio">
<input name="a" type="radio" checked>

score 0 · Answer 2 · answered May 27 '19 at 10:09

If you are talking about another approach, then I suggest, there is no need to use javascript at all. You can do it with css too, if you just want to change color of radiobutton and check which one is checked.

Well you can not change the color of native radio button directly. But there is an alternate way, mentioned below.

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #06c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
 left: 9px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: white;
}

<label class="container">One
  <input type="radio" checked="checked" name="a">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="a">
  <span class="checkmark"></span>
</label>

score 0 · Answer 3 · answered May 27 '19 at 10:10

'a' is not same as 'a ' .The name attribute contains CDATA. It can be more or less anything you like. (You shouldn't include leading or tailing white space because user agents can ignore it, but white space in the middle is fine).what i should use as name attributes

$("input[type='radio']").each(function () {
    if ($(this).is(":checked")) {
    $(this).addClass("some");
   }
 });

  .some {
      background-color:#06c!important;
  }

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

Radio buttons are not switching

3 Answers3