jQuery > Get radio button value

by KelseyW

HTML

<div id="YSR_Page:DS_YSR_Mock:mainBlock" class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
    <div class="pbBody">
        <!--admin date-->
        <div class="form-group" id="date">
            <label class="col-md-6 col-lg-6 control-label">
                Date of administration
            </label>
            <div class="col-md-4 col-lg-2">
                <input type="date" id="DOACO__c" showDatePicker="true" html-placeholder="MM/DD/YYYY" />
            </div>
        </div>
        <!--end date-->

        <!--administration type-->
        <div class="form-group" id="administration">
            <label class="col-md-6 col-lg-6 control-label">

                How was this form administered?
            </label>
            <div class="col-md-4 col-lg-2">
                <select id="CBOMETH__c" styleClass="form-control input-sm">
                    <option>online</option>
                    <option>paper</option>
                </select>
            </div>
        </div>
        <!--end admin type-->

        <span id="YSR_Page:DS_YSR_Mock:mainBlock:j_id27"></span>

        <div class="striped-question" id="questionRows">
            <div class="form-group" id="groupPanel">
                <label class="col-md-12 col-lg-5 control-label" id="questionLabel">
                    <span class="nmbr">1.</span>Shamble Bubble Dibble Dooble&nbsp;&nbsp;
                </label>
                <div class="col-md-12 col-lg-7 radio-div" id="fieldset1">
                    <span class="nmbr"></span>
                    <fieldset style="border: none;">
                        <table role="presentation" id="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections" class="radio-list radio-list-inline">
                            <tbody>
                                <tr>
                                    <td>
                                        <input name="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections"...

CSS

.foci {
    border: 1px solid red;
}

.hilight {
    background-color: yellow;
}

.blue {
    background-color: blue;
    color: white;
}

JavaScript

$(document).ready(function() {
    /*focus on the first radio-list in table*/
    $("table.radio-list").first().addClass("hilight");
    $("div.form-group").first().addClass("foci");
    $("div#groupPanel").first().addClass("blue");
    var div1 = $("div.form-group").first().attr("id");

    /*find the # of questions total*/
    var Qs = $("table.radio-list").length;

    document.addEventListener('keydown', (event) => {
        const keyName = event.key;
        var focusedEle = document.activeElement;
		var focused = focusedEle.id;

        /*  var activeEle = $(":focus").attr('name');*/
        alert('You pressed ' + keyName + '. ' + focused + ' is active.');
        alert(Qs + ' ' + div1);

    });
	
	 $('fieldset').each(function(index) {
        var $fieldset = $(this);
        var $input = $fieldset.find('input');
        var $label = $fieldset.find('label');
        $input.focus(function() {
            select = index;
            $label.css({
                backgroundColor: "#A7C942",
                color: "black",
                fontSize: "2em"
            });
        }).blur(function() {
            $label.css({
                backgroundColor: "gray",
                color: "black",
                fontSize: "2em"
            });
        });
    });

    var select = 0;
    $(document).on('keydown', function(ev) {
        ev.preventDefault();
        var inputs = $("fieldset :input");
        var next = select < (inputs.length - 1) ? select + 1 : 0;
        $("fieldset input")[next].focus();
    });

    $("fieldset :input")[select].focus();
});