jquery 只选择第一组单选按钮答案

【问题标题】：The jquery only selects the first group of radio buttonsjquery 只选择第一组单选按钮
【发布时间】：2016-03-02 12:24:43
【问题描述】：

我正在创建一个用户可以创建表单的系统。所以我不知道单选按钮的名称。用户可以根据需要创建尽可能多的不同单选按钮。如果脚本启动，我想检查一种类型的所有第一个单选按钮。然而，我制作的 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

【问题讨论】：

标签： javascript jquery input

【解决方案1】：

您可以使用.find() 方法获取每个项目的第一个p（从$(".formElement") 返回），然后再次find 以获取从前一个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()

【讨论】：

【解决方案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>

【讨论】：