CODEWITHSUNDEEP
javascriptjquerycss-selectorsevent-handlingradio-group
theovogg
theovogg

Reputation: 81

Within a radio-group, how to add and remove class names at radio button parents when checking/unchecking takes place?

I am trying to add a class to the radio button parent element when checked. The problem is, the class doesn't seem to delete when using removeClass. I can still see the red background when the checkbox is unchecked.

This is what I came up with so far ...

$('input:radio').change(function () {
  if($(this).is(':checked')) {

    $(this).parent().addClass('selected');
  } else {
    $(this).parent().removeClass('selected');
  }
});
.selected {
  background-color: #fff5f5;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Select a maintenance drone:</p>

<div class="">
  <input type="radio" id="huey" name="drone" value="huey"
         checked>
  <label for="huey">Huey</label>
</div>

<div class="">
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div class="">
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

How do I need to change my code in order to achieve the correct behavior?

Upvotes: 1

Views: 1877

Answers (5)

tanuj.patra
tanuj.patra

Reputation: 1

This works fine

$('input:radio').change(function(){
    $('input:radio').parent().removeClass('selected');  // Remove the class from every element
    $(this).parent().addClass('selected');   // Add calss to the clicked element
});
.selected {
  background-color: #fff5f5;
  color: red;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="">
    <input type="radio" id="huey" name="drone" value="huey"
           checked />
    <label for="huey">Huey</label>
  </div>

  <div class="">
    <input type="radio" id="dewey" name="drone" value="dewey" />
    <label for="dewey">Dewey</label>
  </div>

  <div class="">
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">Louie</label>
  </div>
</body>

Upvotes: 0

Peter Seliger
Peter Seliger

Reputation: 13431

This is a "fat free, valid HTML and CSS only" variant with a slightly improved semantic structure ...

.radio-group label,
.radio-group .content {
  display: block;
  position: relative;
}
.radio-group label {
  cursor: pointer;
} 
.radio-group label:hover {
  background-color: #fffbfb;
}
.radio-group .content {
  z-index: 0;
  padding: 1.3em 8px 8px 24px;
  margin: -1.3em 0 0 0;
}
.radio-group .label,
.radio-group [type="radio"] {
  position: relative;
  z-index: 1;
}
.radio-group [type="radio"] {
  top: 1px;
}
.radio-group [type="radio"]:checked ~ span {
  color: red;
}
.radio-group [type="radio"]:checked ~ .content {
  background-color: #fff5f5;
}
<fieldset class="radio-group">
  <legend>Select a maintenance drone:</legend>

  <label>
    <input type="radio" name="drone" value="huey"/>
    <span class="label">Huey</span>
    <span class="content">... more phrasing content ...</span>
  </label>

  <label>
    <input type="radio" name="drone" value="dewey"/>
    <span class="label">Dewey</span>
    <span class="content">... more phrasing content ...</span>
  </label>

  <label>
    <input type="radio" name="drone" value="louie"/>
    <span class="label">Louie</span>
    <span class="content">... more phrasing content ...</span>
  </label>
</fieldset>

Upvotes: 0

cursorrux
cursorrux

Reputation: 1456

No need to check else part in the is(':checked') condition.

On click of radio button;

  • Firstly, perform removeClass() from all radio button.
  • Then, addClass() only to the respective checked parent element.

$('input:radio').change(function(){
  
   $('input:radio[name=' + this.name + ']').parent().removeClass('selected'); //remove class "selected" from all radio button with respective name
   $(this).parent().addClass('selected'); //add "selected" class only to the checked radio button
  
 });
input[type="radio"] + label {
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}

.selected {
  background-color: #fff5f5;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<p>Select a maintenance drone:</p>

<div class="">
  <input type="radio" id="huey" name="drone" value="huey">
  <label for="huey">Huey</label>
</div>

<div class="">
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div class="">
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

Upvotes: 1

samuelcolt
samuelcolt

Reputation: 263

you can solve it with only css

input[type="radio"] ~ label {
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}

input[type="radio"] {
  position: absolute;
}
input[type="radio"]:checked ~ label {
  background-color: #fff5f5;
  color: red;
}

Upvotes: 0

Saeed
Saeed

Reputation: 5488

First remove all classes of parents, then add class to parent of selected one.

$('input[type=radio]').change(function() {
  $('input[type=radio]').each(function() {
    $(this).parent().removeClass('selected');
  });
 $(this).parent().addClass('selected');
});
.selected {
  background-color: #fff5f5;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>

<div class="">
  <input type="radio" id="huey" name="drone" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div class="">
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div class="">
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

Upvotes: 0

Related Questions