如何在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響應得到以下內容：

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

這意味着我必須設置檢查gruop 1的第3個無線電輸入，依此類推。

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

Answer 1

根據屬性等於選擇器進行選擇並更新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){ $("[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" />