CODEWITHSUNDEEP
javascripthtml
MihicaStok
MihicaStok

Reputation: 113

Radio buttons are not switching

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/

Upvotes: 0

Views: 966

Answers (3)

Manikant Gautam
Manikant Gautam

Reputation: 3581

'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>

Upvotes: 0

Vikas Gupta
Vikas Gupta

Reputation: 1233

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>

Upvotes: 0

NullDev
NullDev

Reputation: 7303

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>

Upvotes: 3

Related Questions