Dynamically checked radio button, based on 'value' attribute, not checking

Question

Trying to get a form to load pages with the previously checked radios already checked (upon a fresh load).

The submissions of that page are held as php variables which I can pass into the javascript, the rest should be simple, but it's not working for me.

My code:

<div class="question">
            <label for="sv_213">Question?</label> 
            <input 
                    class="radio"
                    type="radio" 
                    value="Yes" 
                    name="sv_213" 
                />Yes
            <input 
                    class="radio"
                    type="radio" 
                    value="No" 
                    name="sv_213"
                />No

        </div>

My javascript:

$(function() {
    var $213 = Yes;
    $("input[name='sv_213'][value="$213"]").attr('checked', true);

    });?

In the above js the

var $213 = <dynamically generated content>

Such that it is set equal to the value of the radio button that was checked

Here is a js fiddle with it not working: http://jsfiddle.net/CW8AC/

Many thanks for any help.

Incidentally my code is based on this, previously asked question: Set selected radio from radio group with a value

Fondly

That doesn't change the outcome for me on my page or the jsfiddle: jsfiddle.net/CW8AC/2 – Fondly

Answer 1

You need quotes around your value "Yes", since this is a string, and not a boolean or number.

var $213 = "Yes";

Also, you need to add the variable into the selector with +'s like this:

$("input[name=sv_213][value="+$213+"]").attr('checked', true);

Updated fiddle, working: http://jsfiddle.net/CW8AC/1/

Full js code:

$(function() {
    var $213 = "Yes";
    $("input[name=sv_213][value="+$213+"]").attr('checked', true);

    });

Update:## Since jQuery 1.6, you can also use the .prop method with a boolean value (this should be the preferred method):

$("input[name=sv_213][value="+$213+"]").prop('checked', true);

in my case, the .attr() method didnt worked for dynamically selecting the radio button whereas .prop() did.

Deputy

Answer 2

A javascript solution would be:- For just two(2) radio buttons:

let radios = document.getElementsByName(nameProperty);
let value = "1";//value you want to compare radio with

if (radios[0].value == value) {
  radios[0].checked = true;
}else{
  radios[1].checked = true;
}

for three or more radio buttons:

let radios = document.getElementsByName(nameProperty);
let value = "1";//value you want to compare radio with

for (let i = 0, length = radios.length; i < length; i++) {
  if (radios[i].value == value) {
    radios[i].checked = true;
    
    // only one radio can be logically checked, don't check the rest
    break;
  }
}

Klina

Answer 3

And in D3, in case anyone was wondering.

d3.selectAll("input[name='sv_213'][value=" + $213 + "]").property("checked", true);

Warmongering