纯JavaScript切换,以选择/取消选择所有复选框

时间:2019-02-08 11:13:44

标签: javascript jquery html css

我有在jQuery中运行的代码,但不确定如何使用纯JavaScript复制它吗?

我希望能够单击一个按钮并选中该div中的所有复选框。然后再次单击以取消选择。

每个部分都位于手风琴中,因此认为可能需要使用(this),因此它不会在每个手风琴中都选择全部。

DEMO

$('.checkAll').click(function () {
   if ($(this).val() == 'Check All') {
     $('.container-bikes input').prop('checked', true);
     $(this).val('Uncheck All');
   } else {
     $('.container-bikes input').prop('checked', false);
     $(this).val('Check All');
   }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2 个答案:

答案 0 :(得分:1)

如果您给按钮指定了ID,则可以按ID选择按钮。请参见下面的代码的第一行。

然后可以按类名称选中所有复选框,请参见第2行。

然后,您可以存储一个布尔值,以确定是否将选中复选框,并显示按钮的文本。

您可以为按钮附加一个单击事件侦听器,并在其中翻转isChecked布尔值。您遍历每个复选框,如果isChecked为true,则将checkbox属性设置为该属性,否则删除此属性。另外,如果isChecked为true,则通过设置输入元素的值,将按钮的文本设置为Uncheck All,否则设置为Check All。

const checkAllButton = document.getElementById("checkAll");
const checkboxes = document.getElementsByClassName("first");
let isChecked = false;
checkAllButton.addEventListener("click", function(){
  isChecked = !isChecked;
  //check or uncheck inputs
  for(checkbox of checkboxes){
    if(isChecked){
      checkbox.setAttribute('checked', true);
    } else {
      checkbox.removeAttribute('checked');
    }
  }
  checkAllButton.value = isChecked ? "Uncheck All" : "Check All";
});
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check All">
<div class="container-bikes">
  <input class="first" id="Item 1" name="option1" type="checkbox">
  <label class="label1" for="Item 1">Item 1</label>
  <input class="first" id="Item 2" name="option1" type="checkbox">
  <label class="label1" for="Item 2">Item 2</label>
  <input class="first" id="Item 3" name="option1" type="checkbox">
  <label class="label1" for="Item 3">Item 3</label>
  <input class="first" id="Item 4" name="option1" type="checkbox">
  <label class="label1" for="Item 4">Item 4</label>
</div>

答案 1 :(得分:0)

好的,如果您想进行直接转换,则需要这样的东西。

document.querySelector('.checkAll').addEventListener('click', e => {
  if (e.target.value == 'Check All') {
    document.querySelectorAll('.container-bikes input').forEach(checkbox => {
      checkbox.checked = true;
    });
    e.target.value = 'Uncheck All';
  } else {
    document.querySelectorAll('.container-bikes input').forEach(checkbox => {
      checkbox.checked = false;
    });
    e.target.value = 'Check All';
  }
});
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>

<input class="checkAll" type="button" value="Check All">

<div class="container-bikes">
  <input class="first" id="Item 1" name="option1" type="checkbox">
  <label class="label1" for="Item 1">Item 1</label>
  <input class="first" id="Item 2" name="option1" type="checkbox">
  <label class="label1" for="Item 2">Item 2</label>
  <input class="first" id="Item 3" name="option1" type="checkbox">
  <label class="label1" for="Item 3">Item 3</label>
  <input class="first" id="Item 4" name="option1" type="checkbox">
  <label class="label1" for="Item 4">Item 4</label>
</div>

我已经将每个JQuery仅更改为它的纯副本。