Javascript JQuery正在查找下一个输入的名称

我有以下三组复选框：

<h3 class="heading">List 1 <span><a id="list1" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list1[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list1[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list1[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 2 <span><a id="list2" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list2[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list2[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list2[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 3 <span><a id="list3" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list3[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list3[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list3[]" value="5" /> Option 3</label><br />

$(this).closest('h3').nextUntil('h3').find(':checkbox')

---

问题是我所有查找下一个

输入的尝试都失败了，控制台返回：
undefined
。我做错了什么？
试试这个片段。因为您使用了name属性及其与触发元素的ID类似的属性


$（'#列表1，#列表2，#列表3'）。单击（函数（）{
$（'input[name=“”+$（this）.attr（'id'）+“[]”]）。每个（函数（）{
$（this.prop（'checked'，true）；
});
});

清单1
选项1

选项2

选项3

清单2
选项1

选项2

选项3

清单3
选项1

选项2

选项3
试试这个片段。因为您使用了name属性及其与触发元素的ID类似的属性


$（'#列表1，#列表2，#列表3'）。单击（函数（）{
$（'input[name=“”+$（this）.attr（'id'）+“[]”]）。每个（函数（）{
$（this.prop（'checked'，true）；
});
});

清单1
选项1

选项2

选项3

清单2
选项1

选项2

选项3

清单3
选项1

选项2

选项3
方法
.next（）
只查找紧挨着的下一个同级（如果有一个同级匹配选择器），它通常不会在DOM中搜索

但是您不需要使用DOM导航来查找后面的元素，因为单击的元素的
id
与相关复选框的
name
直接相关

显然，
id
->
name
关系在您的真实代码中并不存在。好的，那么我建议最好的方法是在复选框中添加一个
data-associated cb=“list1[]”
属性，这样您就可以直接读取该属性，而不是执行DOM导航。这样，即使结构发生变化，元素仍将链接。或者使用公共类。不管怎样

但是，如果您仍然只想对显示的结构执行DOM导航，则可以执行此操作以获取所有复选框：

<h3 class="heading">List 1 <span><a id="list1" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list1[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list1[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list1[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 2 <span><a id="list2" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list2[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list2[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list2[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 3 <span><a id="list3" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list3[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list3[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list3[]" value="5" /> Option 3</label><br />

$(this).closest('h3').nextUntil('h3').find(':checkbox')

…或仅针对第一个：

$(this).closest('h3').next().find(':checkbox')

因此，将其插入到现有代码中，您可以得到：


$（'list1，'list2，'list3'）。在（'click'，函数（e）上{
var allChecked=true；
var inputName=$（this）.nextest（'h3'）.nextUntil（'h3'）.find（':checkbox'）；
inputName.each（函数（）{
如果（！this.checked）{
allChecked=false；
}
});
inputName.prop（'checked'，！allChecked）；
});

清单1
选项1

选项2

选项3

清单2
选项1

选项2

选项3

清单3
选项1

选项2

选项3
方法
.next（）
只查找紧挨着的下一个同级（如果有一个同级匹配选择器），它通常不会在DOM中搜索

但是您不需要使用DOM导航来查找后面的元素，因为单击的元素的
id
与相关复选框的
name
直接相关

显然，
id
->
name
关系在您的真实代码中并不存在。好的，那么我建议最好的方法是在复选框中添加一个
data-associated cb=“list1[]”
属性，这样您就可以直接读取该属性，而不是执行DOM导航。这样，即使结构发生变化，元素仍将链接。或者使用公共类。不管怎样

但是，如果您仍然只想对显示的结构执行DOM导航，则可以执行此操作以获取所有复选框：

<h3 class="heading">List 1 <span><a id="list1" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list1[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list1[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list1[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 2 <span><a id="list2" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list2[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list2[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list2[]" value="5" /> Option 3</label><br />
<h3 class="heading">List 3 <span><a id="list3" href="javascript:;">check all</a></span></h3>
<label><input type="checkbox" name="list3[]" value="3" /> Option 1</label><br />
<label><input type="checkbox" name="list3[]" value="4" /> Option 2</label><br />
<label><input type="checkbox" name="list3[]" value="5" /> Option 3</label><br />

$(this).closest('h3').nextUntil('h3').find(':checkbox')

…或仅针对第一个：

$(this).closest('h3').next().find(':checkbox')

因此，将其插入到现有代码中，您可以得到：


$（'list1，'list2，'list3'）。在（'click'，函数（e）上{
var allChecked=true；
var inputName=$（this）.nextest（'h3'）.nextUntil（'h3'）.find（':checkbox'）；
inputName.each（函数（）{
如果（！this.checked）{
allChecked=false；
}
});
inputName.prop（'checked'，！allChecked）；
});

清单1
选项1

选项2

选项3

清单2
选项1

选项2

选项3

清单3
选项1

选项2

选项3
您是否阅读了
.next（）
方法的文档？它只找到紧邻的下一个同级（如果有一个同级与选择器匹配），它通常不会在DOM中搜索。@nnnnnn是的，它不仅仅是
next（）
。。。我已经尝试了
nextAll（）
，
find（）
，等等……目标是找到下一个名称，还是只选中/取消选中相关元素？这两种方法都可以实现，但实际上不需要搜索名称，因为它与单击元素的ID相同，只是末尾有
[]
。与依赖内置jQuery方法相比，您可能需要实现更复杂的方法来定位它们。另外，您有这么多重复的
name
属性可能会有问题…@anied-重复的
name
s没有问题。它们有不同的值。您是否阅读了
.next（）
方法的文档？它只找到紧邻的下一个同级（如果有一个同级与选择器匹配），它通常不会在DOM中搜索。@nnnnnn是的，它不仅仅是
next（）
。。。我已经尝试了
nextAll（）
，
find（）
，等等……目标是找到下一个名称，还是只选中/取消选中相关元素？这两种方法都可以实现，但实际上不需要搜索名称，因为它与单击元素的ID相同，只是末尾有
[]
。与依赖内置jQuery方法相比，您可能需要实现更复杂的方法来定位它们。另外，您有这么多重复的
name
属性可能会有问题…@anied-重复的
name
s没有问题。它们有不同的值。我需要名称。。。如评论中所述