I have 3 radio buttons:

<div id="step-1">
    <h2 class="StepTitle">
        <label style="font-weight: bold; color: #662819;" id="frage1"></label>
    </h2>
    <br />

    <input type="radio" name="group1" id="antwort1" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort1fuerFrage1"></label>
    <br />
    <br />

    <input type="radio" name="group1" id="antwort2" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort2fuerFrage1"></label>
    <br />
    <br />

    <input type="radio" name="group1" id="antwort3" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort3fuerFrage1"></label>
</div>

I am trying to read if radio button is checked, and save a value (need 1 or/ 0) like this:

var frage1 = document.getElementById("frage1").innerHTML;
var antwort1 = document.getElementById("antwort1");
var antwort2 = document.getElementById("antwort2");
var antwort3 = document.getElementById("antwort3");

antwort1 = $('input[id="antwort1"]:checked').val();
antwort2 = $('input[id="antwort2"]:checked').val();
antwort3 = $('input[id="antwort3"]:checked').val();

antwort 1, 2, 3 are undefined. I need to get 0 or 1.

I have 3 radio buttons:

<div id="step-1">
    <h2 class="StepTitle">
        <label style="font-weight: bold; color: #662819;" id="frage1"></label>
    </h2>
    <br />

    <input type="radio" name="group1" id="antwort1" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort1fuerFrage1"></label>
    <br />
    <br />

    <input type="radio" name="group1" id="antwort2" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort2fuerFrage1"></label>
    <br />
    <br />

    <input type="radio" name="group1" id="antwort3" value="" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" />
    <label id="antwort3fuerFrage1"></label>
</div>

I am trying to read if radio button is checked, and save a value (need 1 or/ 0) like this:

var frage1 = document.getElementById("frage1").innerHTML;
var antwort1 = document.getElementById("antwort1");
var antwort2 = document.getElementById("antwort2");
var antwort3 = document.getElementById("antwort3");

antwort1 = $('input[id="antwort1"]:checked').val();
antwort2 = $('input[id="antwort2"]:checked').val();
antwort3 = $('input[id="antwort3"]:checked').val();

antwort 1, 2, 3 are undefined. I need to get 0 or 1.

• javascript
• jquery
• radio-button
• selecteditem
• radio-group

3 Answers 3

You could just use .length since you're querying IDs:

antwort1 = $('#antwort1:checked').length;
antwort2 = $('#antwort2:checked').length;
antwort3 = $('#antwort3:checked').length;

Use prop() like

antwort1 = $('input[id="antwort1"]').prop();
antwort2 = $('input[id="antwort2"]').prop();
antwort3 = $('input[id="antwort3"]').prop();

Fiddle

You could do like this:

var antwort1 = $('#antwort1:checked').length;
var antwort2 = $('#antwort2:checked').length;

console.log(antwort1);
console.log(antwort2);

FIDDLE DEMO