Question

我是jQuery的新手，我无法弄清楚如何链接选择器。目标是选择具有“.restricted”类的复选框。这是我的JS控制台的输出：

> $("#capability_panel input[type='checkbox']")
[
<input type="checkbox" id="jbp_product_workshops" value="option1">
, 
<input type="checkbox" id="jbp_elevate_creators" value="option2" class="restricted">
, 
<input type="checkbox" id="jbp_trainings" value="option3">
, 
<input type="checkbox" id="jbp_resources_ask" value="option4" class="restricted">
, 
<input type="checkbox" id="jbp_talent_exchange" value="option5" class="restricted">
]    

> $("#capability_panel input[type='checkbox'] .restricted")
[]

> $("#capability_panel input[type='checkbox']").find(".restricted")
[]

我必须做点蠢事，对吗？

Answer 1

$("input[type='checkbox'].restricted")

将匹配具有类限制的所有复选框

当您提供$("input[type='checkbox'] .restricted")之类的空格时，它会查找类restricted

的子元素

再次$("#capability_panel input[type='checkbox']").find(".restricted")将在父级内部查找restricted类的元素。这是不可能的，因为父母是一个复选框

Answer 2

$("input[type='checkbox'])＆lt; - 输入复选框

类型的输入

$("input[type='checkbox'].restricted)＆lt; - 输入类限制的复选框

$("input[type='checkbox'] .restricted)＆lt; - 在类型为复选框

的输入中限制类的元素

Answer 3

jQuery使用CSS选择器和更多来选择元素。

话虽这么说，你可以用选择器实现你想要的东西：

$("#capability_panel input[type='checkbox'].restricted");

如果您想使用函数来获取每个匹配的复选框，可以使用jQuery .filter()：

$("#capability_panel input[type='checkbox']").filter('.restricted');

使用过滤器或选择器之间的主要区别在于您要实现的目标。例如，如果要检查除.restricted之外的每个复选框，可以使用：

$("#capability_panel input[type='checkbox']").prop('checked', true).filter('.restricted').prop('checked', false);

当然这是一个基本的例子（有最佳方式）。

Answer 4

JQuery中的选择器就像CSS一样。

如果你想要带有限制类的复选框，你必须写： $（＆＃34; #capability_panel输入[type =＆＃39; checkbox＆＃39;]。restricted＆＃34;）

两个$（＆＃34; #capability_panel输入[type =＆＃39;复选框＆＃39;] .restricted＆＃34;）和$（＆＃34; #capability_panel输入[type =＆＃39;复选框＆＃ 39;]＆＃34;）。find（＆＃34; .restricted＆＃34;）将首先选择复选框输入并尝试在其中查找受限类的元素。（

在jQuery中链接不同类型的选择器

4 个答案: