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

5 years ago

FTP getting array of file details such as size using PHP
Using FTP and PHP to get an array of file details such as size and…
Creating Laravel form requests
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views
Improving the default Laravel login and register views in such a simple manner but making…