Check for 'checked' checkboxes

Question

Im creating a drop-down with checkboxes, and I want the selected elements to go to an array.

I have them as:

• if they are all checked, the array contains 'All'
• if you de-select 'All' and select whichever then those selected values go to the array
• If 'All' is selected and you de-select another element, 'All' goes to checked false

The only part I'm stuck is if you de-select some element then just send the checked ones to the array.

Ex. All elements are selected and I de-select the second option, then the array comes empty instead of containing what was checked.

To get the values of array you need to click the dropdown

Here's my code:

let itemsSelected = []
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
    alert(itemsSelected)
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }
}

$('.checkValue').change(function() {
  if ($(this).is(':checked')) {
    itemsSelected.push($(this).parent('li').text())
  } else {
    $('.all').prop('checked', false)
    var search_term = 'All';
    var index = itemsSelected.indexOf(search_term); // <-- Not supported in <IE9
    if (index !== -1) {
      itemsSelected.splice(index, 1);
    }
    for (var i = 0; i < itemsSelected.length; i++) {
      if (itemsSelected[i] == $(this).parent('li').text()) {
        itemsSelected.splice(i, 1);
      } else if (!$('.all').is(':checked') && itemsSelected[i] == 'All') {
        itemsSelected.splice(i, 1);
      }
    }
  }
});

$(".all").click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
}

.dropdown-check-list ul.items li {
  list-style: none;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">All</span>
  <ul id="items" class="items">
    <li><input type="checkbox" class="checkValue all" value="All" checked/>All</li>
    <li><input type="checkbox" class="checkValue" value="FirstPlace" checked/>First Place</li>
    <li><input type="checkbox" class="checkValue" value="PlaceSecond" checked/>Second Place </li>
    <li><input type="checkbox" class="checkValue" value="ThirdPlace" checked/>Third Place</li>
    <li><input type="checkbox" class="checkValue" value="FourthPlace" checked/>Fourth Place</li>
  </ul>
</div>

Answer 1

You can use querySelectorAll to get all checked inputs.

document.querySelectorAll('#list1 ul li input:checked');

DEMO

let itemsSelected = []
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
    alert(itemsSelected)
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }
}

$('.checkValue').change(function() {
  if ($(this).is(':checked')) {
    itemsSelected.push($(this).parent('li').text())
  } else {
    $('.all').prop('checked', false)
    var search_term = 'All';
    var index = itemsSelected.indexOf(search_term); // <-- Not supported in <IE9
    if (index !== -1) {
      itemsSelected.splice(index, 1);
    }
    for (var i = 0; i < itemsSelected.length; i++) {
      if (itemsSelected[i] == $(this).parent('li').text()) {
        itemsSelected.splice(i, 1);
      } else if (!$('.all').is(':checked') && itemsSelected[i] == 'All') {
        itemsSelected.splice(i, 1);
      }
    }
  }
});

$(".all").click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

function getChecked() {
  let val = document.querySelectorAll('#list1 ul li input:checked');
  val.forEach(e => {
    console.log(e.value)
  })
}

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
}

.dropdown-check-list ul.items li {
  list-style: none;
  outline: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">All</span>
  <ul id="items" class="items">
    <li><input type="checkbox" class="checkValue all" value="All" checked/>All</li>
    <li><input type="checkbox" class="checkValue" value="FirstPlace" checked/>First Place</li>
    <li><input type="checkbox" class="checkValue" value="PlaceSecond" checked/>Second Place </li>
    <li><input type="checkbox" class="checkValue" value="ThirdPlace" checked/>Third Place</li>
    <li><input type="checkbox" class="checkValue" value="FourthPlace" checked/>Fourth Place</li>
  </ul>
</div>

<button onclick="getChecked()">
Get Checked
</button>