jQuery get correct value of selected radio button

Question

After research and lot of attempts of various implementations looking how to get radio button value from my application. Basically it is very simple radio button in file Index.cshtml :

<div class="col-md-2">
            <div style="padding: 0 20px;">
                <label for="star-filter2"> Projects vendors status:</label>
                <fieldset id="star-filter2">
                    <input class="radioCheck2" id="rated-filter2" value="true" type="radio" name="starfilter2" />Rated<img src="~/images/check.png" alt="tick box" height="20" width="20" />
                    <br />
                    <input class="radioCheck2" id="rated-filter2" value="false" type="radio" name="starfilter2" />Not rated<img src="~/images/excl_mark.png" alt="excl mark" height="20" width="20" />
                    <br />
                    <input class="radioCheck2" id="rated-filter2" value="null" type="radio" name="starfilter2" />NULL<img src="~/images/excl_mark.png" alt="excl mark" height="20" width="20" />
                </fieldset>
            </div>
        </div>

Here is my javascript code where I am trying to get selected radio button value:

    $("#filter2").click(function () {

    var showRated = $('#rated-filter2').is(':checked');
    localStorage.setItem("showRated", showRated);
    var location = $("#filter-button2").find("a").attr("href")....;
    window.location.href = location;
});

In this code line: var showRated = $('#rated-filter2').is(':checked'); is working , but it is only to get value when it is checked. What I want , I want to get value of selected radio button, for example : true , "null" and any value which I insert into radio button.

I tried these lines, where I was getting 'undefined' or always false value.

$('#input[name=\'starfilter2\']:checked').val(); 
$('#rated-filter2:selected').val();
$('#input[name=starfilter2]:checked').val();

None of them it is not working.

You're using `#input` as the selector, but none of the elements have an ID of `input`. Try `$('input[name=starfilter2]:checked').val()`. Your three inputs also have the same ID, which shouldn't be the case - ID's should be unique to one element only on a page. — , May 23 '19 at 21:56
Since it's a radio, too, when the `change` event is fired, it means one of them is checked (you can't really un-check a radio button without code). So, without even checking if one is checked, you can just use something like this to get the checked radio's value: `$('[name=starfilter2]').change(function() { alert(this.value); });` — , May 23 '19 at 22:13
Possible duplicate of [jQuery get value of selected radio button](https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button) — Darth Veyda, May 24 '19 at 01:58
`$(":radio:checked").val();` `:radio` is a special jQuery selector equivalent to `$("input[type=radio]")`. — zer00ne, May 24 '19 at 02:58

score 1 · Accepted Answer · edited Jun 06 '19 at 15:24

1

Whoa, first of all, there is no reason to have multiple Ids of the same name in this case rated-filter2. IDs are supposed to be unique (like a driver's license ID or a social security number)

$(document).ready(function(){
    $("input[type='button']").click(function() {
        var radioValue = $("input[name='star-filter2']:checked").val();
        if(radioValue){
            alert("Selected: " + radioValue);
        }
    });
});

Or replace this

var radioValue = $("input[name='star-filter2']:checked").val();

with this

var radioValue = $("input[id='rated-filter2']:checked").val();

Keep in mind to have unique IDs.

edited Jun 06 '19 at 15:24

Pritesh

1,066
3
15
35

answered May 23 '19 at 22:29

jPhizzle

487
1
5
16

1

Just to follow-up regarding names for radios - if you have a radio group, all radio inputs in the group should have the same name (that's how they're tied together so only one radio can be checked in the same-named group). If the names are different, the radios won't be tied together, they'll just basically be rounded checkboxes that can't be unchecked. https://jsfiddle.net/rwejadho/ – May 23 '19 at 22:58

jQuery get correct value of selected radio button

1 Answers1