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