Bootstrap cards as selectable radio buttons

Turning bootstrap cards into selectable radio buttons with active states using jQuery.

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>

Next Collapsable Bootstrap side nav menu »

Previous « Loading Javascript files after page has finished loading

Tags: BootstrapHow toHTMLjQueryWeb design

6 years ago

Using Laravel’s deleteDirectory to delete folders and their contents
If you ever needed a simple solution in Laravel to delete an entire directory and…
Using React Icons
React icons is the easiest way to get all the common and popular icon packs…
How to allow only 1 user to register in a Laravel application
How to enforce only one user to register or be registered in a Laravel web…