JQuery finding the name of the next input

Question

JSFiddle

I have the following, three sets of checkboxes:

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

And with JQuery, I'm trying to get it so when a "check all" link is clicked, it dynamically finds the next input name:

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

The problem is all of my attempts to find the next input name fails, and the console returns: undefined. What am I doing wrong?

Answer 1

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

Answer 2

The .next() method finds only the immediate next sibling (if there is one matching the selector), it doesn't just generally search on through the DOM.

But you don't need to use DOM navigation to find the elements that follow, because the id of the clicked element is directly related to the name of the associated checkboxes.

Apparently the id -> name relationship doesn't exist in your real code. OK, then I'd suggest the best method would be to add a data-associated-cb="list1[]" attribute to the checkbox so that you can just read that attribute instead of doing DOM navigation. That way it doesn't matter if the structure changes, the elements would still be linked. Or use a common class. Whatever.

But if you still really just want to do DOM navigation for exactly the structure shown you can do this to get all of the checkboxes:

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

...or for just the first one:

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

So, slotting that into your existing code, you get this:

$('#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 />

Note that you can simplify your function (you don't need the .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 3

Try this snippet. Since you used the name attribute and its similar with the ID of the triggering element.

$('#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 />