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>