javascript - 检查 'checked' 复选框

Question

我正在创建一个带有复选框的下拉菜单，我希望将选定的元素放入一个数组中。

我把它们作为:

• 如果全部勾选，则数组包含'All'
• 如果您取消选择“全部”并选择任何一个，那么这些选定的值将进入数组
• 如果选择了“全部”并且您取消选择了另一个元素，则“全部”将变为选中的 false

唯一让我卡住的部分是，如果您取消选择某些元素，然后将选中的元素发送到数组。

例。所有元素都被选中，我取消选择第二个选项，然后数组变为空，而不是包含选中的内容。

要获取数组的值，您需要单击下拉列表

这是我的代码:

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

您可以使用 querySelectorAll 获取所有选中的输入。

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

演示

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>