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>