Question

我有一组单选按钮，它们是使用jsp中的for循环动态创建的。我需要默认情况下选中第一个单选按钮。如何通过jquery做到这一点？

<div id="groupATypeRadio">
   <%  for(SomeList list: someList .values())  {%>
   <span class="font-small pull-left marRight5"><%= list.label %></span>
   <input type="radio" class="marRight5 pull-left"name="groupA" id="<%= list.id%>"  value="<%= list.getId()%>">
   <%} %>
</div>

<div id="groupBTypeRadio">
   <%  for(SomeList list: someList .values())  {%>
   <span class="font-small pull-left marRight5"><%= list.label %></span>
   <input type="radio" class="marRight5 pull-left"name="groupB" id="<%= list.id%>"  value="<%= list.getId()%>">
   <%} %>
</div>

<div id="groupCTypeRadio">
   <%  for(SomeList list: someList .values())  {%>
   <span class="font-small pull-left marRight5"><%= list.label %></span>
   <input type="radio" class="marRight5 pull-left"name="groupC" id="<%= list.id%>"  value="<%= list.getId()%>">
   <%} %>
</div>

我需要从每个组中获取第一个单选按钮，并通过jquery进行检查。我该怎么办？

Answer 1

将一个类添加到您的单选按钮容器div class="radio-groups"中，然后使用以下方法检查每个第一个单选按钮

$(document).ready(function(){
    $(".radio-groups").each(function() {
      $(this).find("input[type='radio']").first().prop('checked', true);
    });
});

查看下面的演示

$(".radio-groups").each(function() {
  $(this).find("input[type='radio']").first().prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupATypeRadio" class="radio-groups">

  <span class="font-small pull-left marRight5">1</span>
  <input type="radio" class="marRight5 pull-left" name="groupA" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupA" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupA" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupA" id="" value="">

</div>

<div id="groupBTypeRadio" class="radio-groups">

  <span class="font-small pull-left marRight5">2</span>
  <input type="radio" class="marRight5 pull-left" name="groupB" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupB" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupB" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupB" id="" value="">

</div>

<div id="groupCTypeRadio" class="radio-groups">

  <span class="font-small pull-left marRight5">3</span>
  <input type="radio" class="marRight5 pull-left" name="groupC" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupC" id="" value="">
  <input type="radio" class="marRight5 pull-left" name="groupC" id="" value="">

</div>

Answer 2

您可以使用以下方法简单地做到这一点：

要使其适用于大于或等于1.6的jquery版本

$("#groupATypeRadio input[type='radio']")[0].attr('checked', 'checked');
$("#groupBTypeRadio input[type='radio']")[0].attr('checked', 'checked');
$("#groupCTypeRadio input[type='radio']")[0].attr('checked', 'checked');

或

使其适用于旧版jQuery

$("#groupATypeRadio input[type='radio']")[0].prop('checked', true);
$("#groupBTypeRadio input[type='radio']")[0].prop('checked', true);
$("#groupCTypeRadio input[type='radio']")[0].prop('checked', true);

如何使用jQuery选择使用for循环元素创建的第一个单选按钮

2 个答案: