Here is a simple implementation of radio buttons using Bootstrap:
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
The goal is to change the button color from btn-danger to btn-success when a radio button is clicked. The JavaScript code provided attempts to achieve this, but encounters an issue where previous selections remain green.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(".btn-success").attr("class", "btn btn-danger");
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
If you click on a radio button, it should turn green (btn-success), and switching to another option will properly update the colors back to red (btn-danger). If you need further assistance, feel free to ask. Thanks!