toggle radio button in html bootstrap 3.4 - html

Question

here i am trying to toogle radio button
here it is i want answer like this
i tried for this like
<label class=" btn-lg btn-primary btn-block">
<input type="radio" :id="choice.id" >Answer {{choiceKey+1}} {{ choice.choice }}
</label>
but it get all color like this

Answer 1

You don't necessarily need JS for this, you can do it CSS-only with the adjacent sibling selector (+). Rough example below:
input[type=radio] {
display: none;
}
input[type=radio]:not(:checked) + label {
background-color: gray;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="something" id="radio_1">
<label for="radio_1" class="btn-lg btn-primary btn-block">Answer 1</label>
<input type="radio" name="something" id="radio_2" checked>
<label for="radio_2" class="btn-lg btn-primary btn-block">Answer 2</label>
<input type="radio" name="something" id="radio_3">
<label for="radio_3" class="btn-lg btn-primary btn-block">Answer 3</label>
<input type="radio" name="something" id="radio_4">
<label for="radio_4" class="btn-lg btn-primary btn-block">Answer 4</label>

Answer 2

Edited. I think it's more what you're looking for.
Starting point, in the Bootstrap docs, see here. For this approach you will need jQuery.
Also note that each radio button needs the same name attribute so they all work together; when you click one, the others turn off.
$("input[type=radio]").change(function() {
// remove the background color from all labels.
$("label").removeClass("btn-primary");
// add the background only to the parent-label of the clicked button.
$(this).parent().addClass("btn-primary");
});
label {
border: 1px solid #204d74 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-block active">
<input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>