Turning bootstrap cards into selectable radio buttons with active states using jQuery.
CodePen example.
To do this you will need Bootstrap and jQuery.
Function to unselect (uncheck) all of the radio buttons:
function unclickRadio() {
$("input:radio").prop("checked", false);
}
Function to select (check) a radio button via its id:
function clickRadio(inputElement) {
$("#" + inputElement).prop("checked", true);
}Function to remove the active class from all cards:
function removeActive() {
$(".card").removeClass("active");
}Make card with certain id have the active class:
function makeActive(element) {
$("#" + element + "-card").addClass("active");
}On ready for a radio button being clicked and then a card being clicked:
$(document).ready(function () {
$('input:radio').change(function () {//Clicking input radio
var radioClicked = $(this).attr('id');
unclickRadio();
removeActive();
clickRadio(radioClicked);
makeActive(radioClicked);
});
$(".card").click(function () {//Clicking the card
var inputElement = $(this).find('input[type=radio]').attr('id');
unclickRadio();
removeActive();
makeActive(inputElement);
clickRadio(inputElement);
});
});The sample HTML:
html code
<div class="container">
<div class="row mt-2">
<div class="col-12">
<form>
<div class="form-group row">
<div class="col-12">
<div class="card-deck">
<div id="elephant-card" class="card mb-4 active">
<div class="card-body" role="button">
<h5 class="card-title"><input id="elephant" type="radio" checked="">
<label for="elephant">Elephant</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div id="lion-card" class="card mb-4 ">
<div class="card-body" role="button">
<h5 class="card-title"><input id="lion" type="radio"> <label
for="lion">Lion</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div id="zebra-card" class="card mb-4 ">
<div class="card-body" role="button">
<h5 class="card-title"><input id="zebra" type="radio"> <label
for="zebra">Zebra</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div class="w-100"></div>
<div id="giraffe-card" class="card mb-4 ">
<div class="card-body" role="button">
<h5 class="card-title"><input id="giraffe" type="radio"> <label
for="giraffe">Giraffe</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div id="hyena-card" class="card mb-4 ">
<div class="card-body" role="button">
<h5 class="card-title"><input id="hyena" type="radio"> <label
for="hyena">Hyena</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div id="meerkat-card" class="card mb-4 ">
<div class="card-body" role="button">
<h5 class="card-title"><input id="meerkat" type="radio"> <label
for="meerkat">Meerkat</label></h5>
<p class="card-text">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>