How to set checked radio button using name and attr in jquery?

Question

I am working with some radio input and want to set them checked while edit function. I used ajax response. I have to set them checked.

The code sample is following:

    <form>
Group 1:
    <input type="radio" name="ans1" str="ans_a" value="1" />
    <input type="radio" name="ans1" str="ans_b" value="2" />
    <input type="radio" name="ans1" str="ans_c" value="3" />
    <input type="radio" name="ans1" str="ans_d" value="4" />

Group 2:
    <input type="radio" name="ans2" str="ans_a" value="1" />
    <input type="radio" name="ans2" str="ans_b" value="2" />
    <input type="radio" name="ans2" str="ans_c" value="3" />
    <input type="radio" name="ans2" str="ans_d" value="4" />

Group 3:
    <input type="radio" name="ans3" str="ans_a" value="1" />
    <input type="radio" name="ans3" str="ans_b" value="2" />
    <input type="radio" name="ans3" str="ans_c" value="3" />
    <input type="radio" name="ans3" str="ans_d" value="4" />


</form>

I get from ajax response the following:

var ans_name = ans1,ans2,ans3;
var str = ans_c,ans_a,ans_d;

That means i have to set checked the 3rd radio input of gruop 1 and so on.

How can i set checked the corresponding radio button by jquery?

Answer 1

Select based on attribute equals selector and update the checked property.

 var ans_name = 'ans1,ans2,ans3'; var str = 'ans_c,ans_a,ans_d'; // split the string into array by , var names = ans_name.split(','), val = str.split(','); // iterate over names array names.forEach(function(v, i) { // generate the selector and get jQuery object using that $('[name="' + v + '"][str="' + val[i] + '"]') // update the property .prop('checked', true); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" /> </form> 

---

Or generate a single selector using Array#map and Array#join methods.

 var ans_name = 'ans1,ans2,ans3'; var str = 'ans_c,ans_a,ans_d'; var names = ans_name.split(','), val = str.split(','); $(names.map(function(v, i) { // geneate the selector return '[name="' + v + '"][str="' + val[i] + '"]'; }) // join the selectors .join(',')) // update the property .prop('checked', true) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" /> </form> 

Answer 2

Explode names and value with data what you get from response and check through loop and you will get radio checked with the correct answer.

 var ans_name = "ans1,ans2,ans3"; var str = "ans_c,ans_a,ans_d"; var checkbox_names = ans_name.split(","); var values = str.split(","); $(checkbox_names).each(function(index, value){ $("[name='"+value+"'][str='"+values[index]+"']").prop("checked",true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" />