JQuery查找下一个输入的名称

Question

JSFiddle

我有以下三组复选框：

<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 -> name 关系在您的真实代码中不存在。好的，那么我建议最好的方法是在复选框中添加一个 data-associated-cb="list1[]" 属性，这样您就可以只读取该属性而不是进行 DOM 导航。这样，无论结构是否发生变化，元素仍然会被链接。或者使用一个普通的类。随便。

但是，如果您仍然真的只想对显示的结构进行 DOM 导航，您可以这样做以获取所有复选框：

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

...或者只是第一个：

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

因此，将其放入现有代码中，您会得到：

$('#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);
});

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

请注意，您可以简化您的功能（您不需要.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

试试这个 sn-p。由于您使用了 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() );
  });
});