javascript - 如何在 jquery 中使用 name 和 attr 设置选中的单选按钮？

Question

我正在使用一些 radio 输入，并希望在编辑功能时将它们设置为选中状态。我使用了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;

这意味着我必须设置检查第 1 组的第 3 个 radio 输入，依此类推。

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>