如何在jquery中使用name和attr設置選中的單選按鈕？

Question

我正在使用一些無線電輸入，並希望在編輯功能時設置它們。我使用了ajax響應。我必須設置他們檢查。

的代碼示例以下：

<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> 

我從Ajax響應得到如下：

變種ans_name = ANS1，ANS2，ANS3;
var str = ans_c，ans_a，ans_d;

這意味着我必須設置檢查gruop 1等的第三無線電輸入。

我該如何設置通過jquery檢查相應的單選按鈕？

Answer 1

根據attribute equals selector選擇並更新checked屬性。

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>

---

或生成使用Array#map和Array#join方法單個選擇。

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

爆炸與你從響應得到什麼數據名稱和價值，並通過循環檢查，你會得到無線電與正確答案進行檢查。

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){ 
 
\t \t $("[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" />