使用 jQuery 单击显示未设置为"无"的第一个单选按钮

Question

所以我正在尝试检查div中包含的单选按钮。我正在尝试访问第一个单选按钮，该按钮的父级是未隐藏的集合中的第一个。代码如下所示：

<div class="form-rectangles">
<label class="form-label rectangle" data-product-attribute-value="108" style="display: none;">
<input type="radio" name="attribute[786]" id="attribute-108" value="108" checked="">
<span class="rectangle-text">1 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="109" style="display: none;">
<input type="radio" name="attribute[786]" id="attribute-109" value="109">
<span class="rectangle-text">2 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="110">
<input type="radio" name="attribute[786]" id="attribute-110" value="110">
<span class="rectangle-text">4 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="111">
<input type="radio" name="attribute[786]" id="attribute-111" value="111">
<span class="rectangle-text">8 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="112">
<input type="radio" name="attribute[786]" id="attribute-112" value="112">
<span class="rectangle-text">16 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="113">
<input type="radio" name="attribute[786]" id="attribute-113" value="113">
<span class="rectangle-text">32 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="114">
<input type="radio" name="attribute[786]" id="attribute-114" value="114">
<span class="rectangle-text">128 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="106">
<input type="radio" name="attribute[786]" id="attribute-106" value="106">
<span class="rectangle-text">90 Capsules</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="107">
<input type="radio" name="attribute[786]" id="attribute-107" value="107">
<span class="rectangle-text">1000 Capsules Bulk</span>
</label>
</div>

因此，在这种情况下，我正在尝试检查id="attribute-110"单选按钮。它是第一个可见标签中的单选按钮组中的第一个。我想是这样的：

$('.form-label:visible:first radio:first').click(); //?

非常感谢您的意见！

Answer 1

你的解决方案几乎是正确的。请记住使用 jQuery 选择器:radio以无线电类型定位input元素，这是[type=radio]的简写

除非 click 事件有任何事件处理程序，否则应更愿意将checked属性设置为 true，而不是单击它。

$('.form-label:visible:first :radio:first').prop('checked', true);

Answer 2

选择器中的一点变化：使用input[type=radio]而不仅仅是radio。

$('.form-label:visible:first input[type=radio]:first').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-rectangles">
<label class="form-label rectangle" data-product-attribute-value="108" style="display: none;">
<input type="radio" name="attribute[786]" id="attribute-108" value="108" checked="">
<span class="rectangle-text">1 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="109" style="display: none;">
<input type="radio" name="attribute[786]" id="attribute-109" value="109">
<span class="rectangle-text">2 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="110">
<input type="radio" name="attribute[786]" id="attribute-110" value="110">
<span class="rectangle-text">4 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="111">
<input type="radio" name="attribute[786]" id="attribute-111" value="111">
<span class="rectangle-text">8 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="112">
<input type="radio" name="attribute[786]" id="attribute-112" value="112">
<span class="rectangle-text">16 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="113">
<input type="radio" name="attribute[786]" id="attribute-113" value="113">
<span class="rectangle-text">32 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="114">
<input type="radio" name="attribute[786]" id="attribute-114" value="114">
<span class="rectangle-text">128 oz</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="106">
<input type="radio" name="attribute[786]" id="attribute-106" value="106">
<span class="rectangle-text">90 Capsules</span>
</label>
<label class="form-label rectangle" data-product-attribute-value="107">
<input type="radio" name="attribute[786]" id="attribute-107" value="107">
<span class="rectangle-text">1000 Capsules Bulk</span>
</label>
</div>

Answer 3

你的代码中有拼写错误。 在选择器中，您写了"Lablel"而不是"label"。尝试解决此问题，如果仍然不起作用，请尝试

$('.form-label:visible input[type=radio]').first().click();

它应该得到你希望找到的第一个元素。

Answer 4

$('.form-lablel:visible:first radio:first').click();

上面的代码有 2 个问题：

1. .form-lablel拼写错误。应该变得.form-label

2. radio:first更改为input[type="radio"]

这应该效果很好。