Как выбрать первый переключатель, созданный с помощью элемента цикла с помощью jquery

У меня есть группа переключателей, созданных динамически с использованием цикла for в jsp. Мне нужно, чтобы первый переключатель переключался по умолчанию. Как я могу это сделать через 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. Как я могу это сделать?

javascript,jquery,jsp,

1

Ответов: 2


1 вниз голос принят

Добавьте класс в свой контейнер div 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>


0

Вы можете просто сделать это, используя ниже:

Чтобы он работал для версии jquery, большей или равной 1,6

$("#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);
JavaScript, JQuery, JSP,
Похожие вопросы