locked
Getting Selected radio button value in a radio button group RRS feed

  • Question

  • User1406973109 posted

    Good day all,

    Please i have this table:

    <fieldset>
    <table border="0" cellpadding="0" width="50%" id="tblQuestion5">
    <tbody>
    <tr>
    <td><label class="ui-table-cell-label">Airtel [Enterprise]</label></td>
    <td><input type="radio" name="Airtel" [enterprise]="" value="1">Poor</td>
    <td><input type="radio" name="Airtel" [enterprise]="" value="2">fair</td>
    <td><input type="radio" name="Airtel" [enterprise]="" value="3">Good</td>
    <td><input type="radio" name="Airtel" [enterprise]="" value="4">Very good</td>
    <td><input type="radio" name="Airtel" [enterprise]="" value="5">Excellent</td>
    </tr>
    <tr>
    <td><label class="ui-table-cell-label">MTN</label></td>
    <td><input type="radio" name="MTN" value="1">Poor</td>
    <td><input type="radio" name="MTN" value="2">fair</td>
    <td><input type="radio" name="MTN" value="3">Good</td>
    <td><input type="radio" name="MTN" value="4">Very good</td>
    <td><input type="radio" name="MTN" value="5">Excellent</td>
    </tr>
    </tbody>
    </table>
    </fieldset>

    And i try to get the selected radio buttons only, when i put an alert to display what is selected, i get the alert 5 times instead of 1 to display just the selected option, how can i correct this? This is my jquery code:

    $("#btnSaveQuestion5").click(function (event) {
            var name;
            var checked;
            var selectedSomething = true;
    
            $("#Qnt5 input:radio").each(function () {
                name = $(this).attr("name");
                if ($("input:radio[name=" + name + "]:checked").length == 0) {
                    //nothing was selected
                    selectedSomething = false;
                }
                else
                {
                    checked = $("input[name=" + name + "]:checked", "#Qnt5").val();
                    alert(name + ":" + checked);
    
                    //arr.push({ "id": storeObject.Id, "QuestionNo": 5, "Answer": storeObject.whatWeSelected + ":" + name + ":" + checked });
                }
            });
    
            if(selectedSomething == false)
            {
                alert("A selection must be made for each option");
                return false;
            }
            else {
                event.stopPropagation();
                event.preventDefault();
                $.mobile.changePage("#Qnt6");
            }
        });

    Thanks for your candid help

    Tim

    Monday, June 20, 2016 7:50 PM

Answers

  • User475983607 posted

    I believe this fits what you're trying to do.  Use Developer Tools (f12) to view the console; otherwise change console.log() to alert().

        <script type="text/javascript">
    
            $(function () {
                $('#btnSaveQuestion5').click(function () {
    
                    var groups = [];
                    //distinct groups
                    $('#tblQuestion5 input:radio').each(function (index, value) {
                        var name = $(this).attr('name');
                        if ($.inArray(name, groups) == -1 ) {
                            groups.push(name);
                        }
                    });
    
                    //Loop over the groups
                    $.each(groups, function (index, value) {
                        if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')) {
                            console.log('Not selected: ' + value)
                        }
                    });
                });
            });
    
        </script>
        <fieldset>
            <table border="0" cellpadding="0" width="50%" id="tblQuestion5">
                <tbody>
                    <tr>
                        <td><label class="ui-table-cell-label">Airtel [Enterprise]</label></td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="1">Poor</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="2">fair</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="3">Good</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="4">Very good</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="5">Excellent</td>
                    </tr>
                    <tr>
                        <td><label class="ui-table-cell-label">MTN</label></td>
                        <td><input type="radio" name="MTN" value="1">Poor</td>
                        <td><input type="radio" name="MTN" value="2">fair</td>
                        <td><input type="radio" name="MTN" value="3">Good</td>
                        <td><input type="radio" name="MTN" value="4">Very good</td>
                        <td><input type="radio" name="MTN" value="5">Excellent</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <input id="btnSaveQuestion5" type="button" value="button" />



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 12:07 AM
  • User-271186128 posted

    Hi timotech,

    Please its working i.e only displays the number of items selected, but what if i want to display the value of radio button selected instead of the name?

    According to mgebhard's code, you can modify it as below:

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                $('#btnSaveQuestion5').click(function () {
    
                    var groups = [];
                    //distinct groups
                    $('#tblQuestion5 input:radio').each(function (index, value) {
                        var name = $(this).attr('name');
                        if ($.inArray(name, groups) == -1) {
                            groups.push(name);
                        }
                    });
    
                    //Loop over the groups
                    $.each(groups, function (index, name) {
    //check whether the radit button is checked if ($("#tblQuestion5 input:radio[name=" + name + "]:checked").length > 0) {
    //get the checked radiobutton value var value = $("#tblQuestion5 input:radio[name=" + name + "]:checked").val(); alert('value : ' + value) } }); }); }); </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 7:42 AM
  • User475983607 posted

    timotech

    if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')), to become

    if ($('#tblQuestion5 input[name="' + value + '"]').is(':checked')) and it works now

    This is just an example that shows how to find the items not selected. Of course if you remove the NOT logic it will show the groups selected.

    Use a selector to get the value of the selected radio.

    //Loop over the groups
    $.each(groups, function (index, value) {
        if ($('#tblQuestion5 input[name="' + value + '"]').is(':checked')) {
            console.log($('#tblQuestion5 input:checked[name="' + value + '"]').val());
                            
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 11:11 AM

All replies

  • User475983607 posted

    I believe this fits what you're trying to do.  Use Developer Tools (f12) to view the console; otherwise change console.log() to alert().

        <script type="text/javascript">
    
            $(function () {
                $('#btnSaveQuestion5').click(function () {
    
                    var groups = [];
                    //distinct groups
                    $('#tblQuestion5 input:radio').each(function (index, value) {
                        var name = $(this).attr('name');
                        if ($.inArray(name, groups) == -1 ) {
                            groups.push(name);
                        }
                    });
    
                    //Loop over the groups
                    $.each(groups, function (index, value) {
                        if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')) {
                            console.log('Not selected: ' + value)
                        }
                    });
                });
            });
    
        </script>
        <fieldset>
            <table border="0" cellpadding="0" width="50%" id="tblQuestion5">
                <tbody>
                    <tr>
                        <td><label class="ui-table-cell-label">Airtel [Enterprise]</label></td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="1">Poor</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="2">fair</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="3">Good</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="4">Very good</td>
                        <td><input type="radio" name="Airtel" [enterprise]="" value="5">Excellent</td>
                    </tr>
                    <tr>
                        <td><label class="ui-table-cell-label">MTN</label></td>
                        <td><input type="radio" name="MTN" value="1">Poor</td>
                        <td><input type="radio" name="MTN" value="2">fair</td>
                        <td><input type="radio" name="MTN" value="3">Good</td>
                        <td><input type="radio" name="MTN" value="4">Very good</td>
                        <td><input type="radio" name="MTN" value="5">Excellent</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <input id="btnSaveQuestion5" type="button" value="button" />



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 12:07 AM
  • User1406973109 posted

    mgebhard

    //Loop over the groups

    $.each(groups, function (index, value)

    {

    if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')) {

    console.log('Not selected: ' + value)

    }

    });

    Thanks mgebhard, i adjusted the :

    if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')), to become

    if ($('#tblQuestion5 input[name="' + value + '"]').is(':checked')) and it works now

    Thanks very much for your help.

    I appreciate, God bless you

    Edit:

    Please its working i.e only displays the number of items selected, but what if i want to display the value of radio button selected instead of the name?

    Thanks

    Tim

    Tuesday, June 21, 2016 12:58 AM
  • User-271186128 posted

    Hi timotech,

    Please its working i.e only displays the number of items selected, but what if i want to display the value of radio button selected instead of the name?

    According to mgebhard's code, you can modify it as below:

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                $('#btnSaveQuestion5').click(function () {
    
                    var groups = [];
                    //distinct groups
                    $('#tblQuestion5 input:radio').each(function (index, value) {
                        var name = $(this).attr('name');
                        if ($.inArray(name, groups) == -1) {
                            groups.push(name);
                        }
                    });
    
                    //Loop over the groups
                    $.each(groups, function (index, name) {
    //check whether the radit button is checked if ($("#tblQuestion5 input:radio[name=" + name + "]:checked").length > 0) {
    //get the checked radiobutton value var value = $("#tblQuestion5 input:radio[name=" + name + "]:checked").val(); alert('value : ' + value) } }); }); }); </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 7:42 AM
  • User1406973109 posted

    Thanks guys for your help

    Its working perfectly now.

    I appreciate.

    Tim

    Tuesday, June 21, 2016 8:40 AM
  • User475983607 posted

    timotech

    if (!$('#tblQuestion5 input[name="' + value + '"]').is(':checked')), to become

    if ($('#tblQuestion5 input[name="' + value + '"]').is(':checked')) and it works now

    This is just an example that shows how to find the items not selected. Of course if you remove the NOT logic it will show the groups selected.

    Use a selector to get the value of the selected radio.

    //Loop over the groups
    $.each(groups, function (index, value) {
        if ($('#tblQuestion5 input[name="' + value + '"]').is(':checked')) {
            console.log($('#tblQuestion5 input:checked[name="' + value + '"]').val());
                            
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 11:11 AM