Question

我有以下html，我想设置要检查的列表中第二个单选按钮的值。我知道我可以使用id属性做到这一点，但我怎么能这样做通过使用如下所示的类选择器并链接要检查的输入字段？

<ul class="myOptionList">
   <li>
     <input id="1" type="radio" value="1" name="options">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="options">
     <label >two</label>
   </li>
   ...
 </ul>

$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked

Answer 1

以下代码可以为您提供帮助。

HTML

<ul class="myOptionList">
   <li>
     <input id="1" type="radio" value="1" name="options">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="options">
     <label >two</label>
  </li>

的jQuery

$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);

对于1.6之前的jQuery版本，请使用：

$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');

Answer 2

$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
  
  Fourth child selected:
<ul class="radio1">
   <li>
     <input id="1" type="radio" value="1" name="option1">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="option1">
     <label >two</label>
   </li>
   <li>
     <input id="3" type="radio" value="3" name="option1">
     <label >three</label>
   </li>
   <li>
     <input id="4" type="radio" value="4" name="option1">
     <label >four</label>
   </li>
 </ul>
  Second child selected:
<ul class="radio2">
   <li>
     <input id="1" type="radio" value="1" name="option2">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="option2">
     <label >two</label>
   </li>
   <li>
     <input id="3" type="radio" value="3" name="option2">
     <label >three</label>
   </li>
   <li>
     <input id="4" type="radio" value="4" name="option2">
     <label >four</label>
   </li>
 </ul>
  First child selected:
<ul class="radio">
   <li>
     <input id="1" type="radio" value="1" name="option">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="option">
     <label >two</label>
   </li>   
 </ul>
  
   First child selected:(same class name)
  <ul class="radio">
   <li>
     <input id="1" type="radio" value="1" name="option4">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="option4">
     <label >two</label>
   </li>   
 </ul>

</body>
</html>

Answer 3

甚至使用：

$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);

显然，它只适用于一个案例。

它设置了所有无线电的检查，直到最后一个，它被设置只是因为它是最后一个。

更有意义的解决方案是使用 .last（）直接转到您要设置的 radio 选项：

＆＃13;

$(function(){

  // Set the last checked radio
  $('.myOptionList li > input[name="options"]').last().prop('checked', true)
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
   <li>
     <input id="1" type="radio" value="1" checked name="options">
     <label >one</label>
   </li>
   <li>
     <input id="2" type="radio" value="2" name="options">
     <label >two</label>
   </li>
   ...
 </ul>

＆＃13;

为了确保它正常工作，我设置了第一个无线电。

但我建议您在值属性中选择 radio 的方式更改代码。

这样做的好处是您的代码将更加清晰，易于理解和更改，如果无线电的顺序发生变化，它仍然会有效。

jQuery设置nth-child输入字段的值？

3 个答案: