Checked Radio Button Example

by James

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<form class="container" id="radioGroup-3c906963-49bb-4466-8ae3-dd82ba8dd2e7">
    <div class="radio">
        <label>
            <input type="radio" name="3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus" data-name="InvitationStatus" value="Invited"/>invited</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus" data-name="InvitationStatus" value="Tentative"/>tentative</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus" data-name="InvitationStatus" value="Declined"/>declined</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus" data-name="InvitationStatus" value="InPerson" checked="checked"/>attending in person</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus" data-name="InvitationStatus" value="Remote"/>attending remotely</label>
    </div>
    <button type="button" class="btn btn-primary" data-btn="3c906963-49bb-4466-8ae3-dd82ba8dd2e7">click me</button>
</form>

JavaScript

$("[data-btn='3c906963-49bb-4466-8ae3-dd82ba8dd2e7']").on('click', function () {

    var $status = $("input[name=3c906963-49bb-4466-8ae3-dd82ba8dd2e7_InvitationStatus]:checked").val();
    alert($status);

    var color;
    var icon;

    switch ($status) {
        case "Tentative":
            icon = "fa fa-question-circle";
            color = "dimgrey";
            text = "Tentative";
            break;
        case "InPerson":
            icon = "fa fa-check-circle";
            color = "darkgreen";
            text = "InPerson";
            break;
        case "Invited":
            icon = "fa fa-thumbs-up";
            color = "darkorange";
            text = "Invited";
            break;
        case "Declined":
            icon = "fa fa-minus-circle";
            color = "red";
            text = "Declined";
            break;
        case "Remote":
            icon = "fa fa-globe";
            color = "purple";
            text = "Remote";
            break;
        default:
            icon = "fa fa-group";
            color = "auto";
            text = "not invited";
            break;
    }


    //$("[data-name='d1c7f6f8-6795-4340-9da6-fe146d4b8ad2']").text(text);
    //$(".attendance-dropdown-d1c7f6f8-6795-4340-9da6-fe146d4b8ad2").css("color", color);
    //$("[data-icon='d1c7f6f8-6795-4340-9da6-fe146d4b8ad2']").removeClass().addClass(icon);


});