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

根据attribute equals selector选择并更新<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="CustomStyles.css" rel="stylesheet"> <script> $(document).ready(function () { $('#myCarousel').carousel({ interval: false }) $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); }); </script> <style> .carousel-inner .active.left { left: -25% ; } .class-inner .active.right{left : 25%;} .carousel-inner .next { left: 25% ; } .carousel-inner .prev { left: -25% ; } .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;} </style> </head> <body> <div class="col-xs-12 text-center" style=" direction: ltr"> <div class="col-md-10 col-md-offset-1"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-3"><a href="#"><img src="1.jpg" href="sa.html" class="img-responsive">1</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="2.jpg" class="img-responsive">2</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="3.jpg" class="img-responsive">3</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="4.jpg" class="img-responsive">4</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="5.jpg" class="img-responsive">5</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="6.jpg" class="img-responsive">6</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="7.jpg" class="img-responsive">7</a></div> </div> <div class="item"> <div class="col-md-3"><a href="#"><img src="8.jpg" class="img-responsive">8</a></div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </body> </html>属性。

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);
})

或使用Array#map和Array#join方法生成单个选择器。

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

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)

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

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

2 个答案: