I'm new to jQuery and I'm finding it challenging. Currently, I have a set of three radio buttons with the third button already prechecked. My aim is to change the CSS class of the checked button, making it similar to an unchecked button with the class "btn-outline-success", and if it's checked, adding the class "btn-success". To achieve this, I am using Bootstrap styling.
Is there a way to visually indicate that a radio button is checked by showing a hover effect?
I attempted the following approach, but I am dissatisfied with the hardcoded nature of it. Moreover, it doesn't work as intended and would require numerous if statements.
Additionally, when I click on another radio button, only the next one gets modified while the previous one retains its "checked" classes.
Is there a solution that works like this in plain words: "If a radio button is checked, show this with the hover effect from the specified CSS classes"?
$("label").click(function() {
if ($("#customRadioInline1").is(":checked")) {
$("#radio1").removeClass("btn-outline-success");
$("#radio1").addClass("btn-success");
}
if ($("#customRadioInline2").is(":checked")) {
$("#radio2").removeClass("btn-outline-secondary");
$("#radio2").addClass("btn-secondary");
}
if ($("#customRadioInline3").is(":checked")) {
$("#radio3").removeClass("btn-outline-info");
$("#radio3").addClass("btn-info");
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="custom-control-inline">
<label class="btn btn-outline-success" id="radio1" for="customRadioInline1">
<input type="radio" id="customRadioInline1" name="status" value="Seriös" class="custom-control-input" />
BUTTON1
</label>
</div>
<div class="custom-control-inline">
<label class="btn btn-outline-secondary" id="radio2" for="customRadioInline2">
<input type="radio" id="customRadioInline2" name="status" value="Hotline" class="custom-control-input" />
BUTTON2</label>
</div>
<div class="custom-control-inline">
<label class="btn btn-outline-info" id="radio3" for="customRadioInline3">
<input type="radio" id="customRadioInline3" name="status" value="Neutral" checked="checked"
class="custom-control-input" />
BUTTON3</label>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>