jquery只选择第一组单选按钮

Question

我正在创建一个系统，用户可以在其中创建一个表单。 所以我不知道单选按钮的名称。 用户可以创建尽可能多的偏离单选按钮，他喜欢。 如果脚本启动，我想检查某种第一个单选按钮。 但我做的jquery只选择第一个。 有人有一个答案：

<div class="formElement"> 
Eieren<br> 
<p class="white"><input type="radio" name="eieren" class="formEl">ja</p> 
<p class="white"><input type="radio" name="eieren" class="formEl">nee</p> 
<p class="white"><input type="radio" name="eieren" class="formEl">soms</p> 
</div> 

<div class="formElement"> 
Peren<br> 
<p class="white"><input type="radio" name="peren" class="formEl">ja</p> 
<p class="white"><input type="radio" name="peren" class="formEl">nee</p> 
<p class="white"><input type="radio" name="peren" class="formEl">soms</p> 
</div> 

<script> 
$(".formElement p:eq(0) :radio").attr("checked", "checked"); 
</script> 

result

Answer 1

您可以使用.find()方法来获取每个项目的第一p（从$(".formElement")返回），并再次找到摆脱以前查找每个元件回流的第一无线电（）。您可以使用下面的代码：

$(".formElement") 
 
\t .find("p:eq(0)")//returns first p element's that match selector 
 
\t .find(":radio")//returns first radio element's that match previous selector 
 
\t .prop("checked", true);//set check to true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="formElement"> 
 
    Eieren 
 
    <br> 
 
    <p class="white"> 
 
    <input type="radio" name="eieren" class="formEl">ja</p> 
 
    <p class="white"> 
 
    <input type="radio" name="eieren" class="formEl">nee</p> 
 
    <p class="white"> 
 
    <input type="radio" name="eieren" class="formEl">soms</p> 
 
</div> 
 

 
<div class="formElement"> 
 
    Peren 
 
    <br> 
 
    <p class="white"> 
 
    <input type="radio" name="peren" class="formEl">ja</p> 
 
    <p class="white"> 
 
    <input type="radio" name="peren" class="formEl">nee</p> 
 
    <p class="white"> 
 
    <input type="radio" name="peren" class="formEl">soms</p> 
 
</div>

参考文献：

:eq()

Answer 2

您可以使用:first-of-type伪像选择以下。

$(".formElement p:first-of-type :radio").prop("checked", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="formElement"> 
 
    Eieren<br> 
 
    <p class="white"><input type="radio" name="eieren" class="formEl">ja</p> 
 
    <p class="white"><input type="radio" name="eieren" class="formEl">nee</p> 
 
    <p class="white"><input type="radio" name="eieren" class="formEl">soms</p> 
 
</div> 
 

 
<div class="formElement"> 
 
    Peren<br> 
 
    <p class="white"><input type="radio" name="peren" class="formEl">ja</p> 
 
    <p class="white"><input type="radio" name="peren" class="formEl">nee</p> 
 
    <p class="white"><input type="radio" name="peren" class="formEl">soms</p> 
 
</div>