Question

我有以下三套复选框：

<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 />

使用JQuery，我试图在单击“全部检查”链接时获取它，它会动态查找下一个input名称：

$('#list1, #list2, #list3').on('click', function () {
    var allChecked = true;
    var inputName = $(this).next('label > input:checkbox').attr('name');
    console.log(inputName);
    inputName.each(function() {
        if (!this.checked) {
            allChecked = false;
        }
    });
    inputName.prop('checked', !allChecked);
});

问题是我尝试查找下一个input名称失败，并且控制台返回：undefined。我做错了什么？

Answer 1

.next()方法只查找紧接着的下一个兄弟（如果有一个与选择器匹配），它通常不会通过DOM搜索。

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

显然是id - ＆gt;您的真实代码中不存在name关系。好的，那么我建议最好的方法是在复选框中添加data-associated-cb="list1[]"属性，这样您就可以只读取该属性而不是进行DOM导航。这样，如果结构发生变化并不重要，那么这些元素仍然会被链接起来。或者使用一个普通的课程。不管。

但是如果你仍然真的只是想要完全显示所显示的结构的DOM导航，你可以这样做以获得所有的复选框：

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

......或者只是第一个：

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

因此，将其插入现有代码中即可获得：

＆＃13;

$('#list1, #list2, #list3').on('click', function(e) {
  var allChecked = true;
  var inputName = $(this).closest('h3').nextUntil('h3').find(':checkbox');
  inputName.each(function() {
    if (!this.checked) {
      allChecked = false;
    }
  });
  inputName.prop('checked', !allChecked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 />

＆＃13;

请注意，您可以简化功能（您不需要.each()）：

$('#list1, #list2, #list3').on('click', function(e) {
  var inputName = $(this).closest('h3').nextUntil('h3').find(':checkbox');
  inputName.prop('checked', inputName.filter(":checked").length < inputName.length);
});

Answer 2

试试这个代码段。由于您使用了name属性及其与触发元素的ID类似。

$('#list1,#list2,#list3').click(function() {
  $('input[name="' + $(this).attr('id') + '[]"]').each(function() {
    $(this).prop('checked', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 />

Answer 3

Please check the code for get value.
$('#list1,#list2,#list3').click(function() {
  var idName = $(this).attr('id')+'[]';
  $("input[name='"+idName+"']").each( function () {
     alert( $(this).val() );
  });
});

JQuery找到下一个输入的名称

3 个答案: