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")返回）并再次找到从前一个find（）返回的每个元素的第一个无线电。您可以使用以下代码：

$(".formElement")
	.find("p:eq(0)")//returns first p element's that match selector
	.find(":radio")//returns first radio element's that match previous selector
	.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>

jquery仅选择第一组单选按钮

2 个答案: