Checking state of checkbox nested inside an a tag, nested inside a li, inside a ul

Question

I'm trying to make a select all for a set of checkboxes in a ul. I have successfully made a toggle but a toggle isn't exactly what I'm looking for.

<ul class="dropdown-menu" id="filter">
    <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />Test 1</a></li>
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />Test 2</a></li>
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />Test 3</a></li>
</ul>

This is the starting of the click function that I'm using to manipulate the page based off of the checkboxes

$('#filter >li>a').on('click', function(event) {
    event.preventDefault();
    var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

From here I'm trying to make an if statement to check whether or not select all (in sample code test1) is selected and whether or not it's checked so that the code can then check or uncheck all other checkboxes.

Is there a reason for using an `anchor` as opposed to a label? — Oluwafemi Sule, Oct 02 '17 at 19:55
I don't think so. It's just the format I found first for doing this kind of set up. Do you think it makes a difference? — Jaskur, Oct 02 '17 at 19:56
Yeah, it does for Accessibility reasons. Screen readers will read this as a label rather than a link — Oluwafemi Sule, Oct 02 '17 at 19:59
Okay that's fair. I'm currently not concerned with accessibility, though that's a good note for going forward! Thank you @OluwafemiSule — Jaskur, Oct 02 '17 at 20:01
If you want to treat a particular element specially, like a Select All checkbox, give it a distinct ID or class, and bind a handler to that ID/class. Then use `:not()` to exclude that element from the general handler. — Barmar, Oct 02 '17 at 20:06

ayunami2000 · Answer 1 · 2017-10-02T20:36:36.610

<ul class="dropdown-menu" id="filter">
    <li><a onclick="for(i=1;i<document.
querySelectorAll('#filter a input').length;i++){document.
querySelectorAll('#filter a input')[i].checked=document.
querySelectorAll('#filter a input')[0].checked;}" href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" id="test1" /><label for="test1">Test 1</label></a></li>
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" id="test2" /><label for="test2">Test 2</label></a></li>
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" id="test3" /><label for="test3">Test 3</label></a></li>
</ul>

From this: https://stackoverflow.com/a/18537624/6917520

Fiddle: https://jsfiddle.net/ayunami2000/z5x4pxk2/3/

score 0 · Answer 2 · answered Oct 02 '17 at 20:14

Check the value for input to see if it's the first option. If it is, select all input in the dropdown menu and have them checked.

$(document).ready(function() {
  $('#filter >li>a').on('click',
    function(event) {
      event.preventDefault();

      var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input'),
        idx;
   
      var isChecked = !$inp.prop('checked');
      if(val == 'option1') {
       $('.dropdown-menu input').prop('checked', isChecked);
      } else {
         $inp.prop('checked', isChecked);
      }
      
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="filter">
  <li>
    <a href="#" class="small" data-value="option1" tabIndex="-1">
      <input type="checkbox">Test 1</a>
  </li>
  <li>
    <a href="#" class="small" data-value="option2" tabIndex="-1">
      <input type="checkbox">Test 2</a>
  </li>
  <li>
    <a href="#" class="small" data-value="option3" tabIndex="-1">
      <input type="checkbox">Test 3</a>
  </li>
</ul>

Checking state of checkbox nested inside an a tag, nested inside a li, inside a ul

2 Answers2