純粋なJavaScriptのフィルタボックスは

Question

<p> 
    <input type="checkbox" id="all"/> 
    <label for="all">Select all</label> 
</p> 
<ul id="li-list"> 
    <li><input type="checkbox" id="one"/><label for="all">value 1</label></li> 
    <li><input type="checkbox" id="two"/><label for="all">value 2</label></li> 
    <li><input type="checkbox" id="three"/><label for="all">value 3</label></li> 
    <li><input type="checkbox" id="four"/><label for="all">value 4</label></li> 
</ul> 

私はすべてのチェックボックスを選択した場合、すべての選択私は

をチェックする必要があり、すべてのすべてのチェックボックスを選択するチェックすると

1. like-動作するように上記のコードたいですチェックする必要があります。しかしチェックボックスのチェックを外した場合は、チェックを外す必要があります。

Answer 1

これは世界でも一番良いコードですが、機能します！

 const mainCheckbox = document.getElementById("all") 
 
     const allCheckboxes = document.getElementsByClassName("maincheck") 
 

 
     mainCheckbox.addEventListener("change", (e) => { 
 
     if (e.currentTarget.checked) { 
 
      checkAll() 
 
     } else { 
 
      uncheckAll() 
 
     } 
 
     }) 
 

 
     for (let i = 0; i < allCheckboxes.length; i += 1) { 
 
     allCheckboxes[i].addEventListener("change", (e) => { 
 
      if (allChecked()) { 
 
      mainCheckbox.checked = true 
 
      } else { 
 
      mainCheckbox.checked = false 
 
      } 
 
     }) 
 
     } 
 

 
     const allChecked =() => { 
 
     for (let i = 0; i < allCheckboxes.length; i += 1) { 
 
      if (!allCheckboxes[i].checked) { 
 
      return false 
 
      } 
 
     } 
 
     return true 
 
     } 
 

 
     const checkAll =() => { 
 
     for (let i = 0; i < allCheckboxes.length; i += 1) { 
 
      allCheckboxes[i].checked = true 
 
     } 
 
     } 
 

 
     const uncheckAll =() => { 
 
     for (let i = 0; i < allCheckboxes.length; i += 1) { 
 
      allCheckboxes[i].checked = false 
 
     } 
 
     }

<p> 
 
     <input type="checkbox" id="all"/> 
 
     <label for="all">Select all</label> 
 
    </p> 
 
    <ul id="li-list"> 
 
     <li><input class="maincheck" type="checkbox" id="one"/><label for="all">value 1</label></li> 
 
     <li><input class="maincheck" type="checkbox" id="two"/><label for="all">value 2</label></li> 
 
     <li><input class="maincheck" type="checkbox" id="three"/><label for="all">value 3</label></li> 
 
     <li><input class="maincheck" type="checkbox" id="four"/><label for="all">value 4</label></li> 
 
    </ul>

Answer 2

var handler = (function() { 
 
    var mainBox = document.getElementById('all'), 
 
     subBoxes = document.querySelectorAll('#li-list input[type="checkbox"]'); 
 
    
 
    var setSubs = function(flag) { 
 
    [].forEach.call(subBoxes, function(s) { 
 
     s.checked = flag; 
 
    }); 
 
    } 
 
    
 
    var testSubs = function() { 
 
    var count = 0; 
 
    [].forEach.call(subBoxes, function(s) { 
 
     if (s.checked) count++; 
 
    }); 
 
    return count == subBoxes.length; 
 
    } 
 
    
 
    return { 
 
    clickBox : function(e) { 
 
     if ('all' == e.target.id) 
 
     setSubs(e.target.checked); 
 
     else 
 
     mainBox.checked = testSubs(); 
 
    } 
 
    }; 
 
})(); 
 

 
// add change event for all checkboxes 
 
var boxes = document.querySelectorAll('input[type="checkbox"]'); 
 
[].forEach.call(boxes, function() { 
 
    this.addEventListener('change', handler.clickBox); 
 
});

<p> 
 
    <input type="checkbox" id="all" /> 
 
    <label for="all">Select all</label> 
 
</p> 
 
<ul id="li-list"> 
 
    <li><input type="checkbox" id="one" /><label for="one">value 1</label></li> 
 
    <li><input type="checkbox" id="two" /><label for="two">value 2</label></li> 
 
    <li><input type="checkbox" id="three" /><label for="three">value 3</label></li> 
 
    <li><input type="checkbox" id="four" /><label for="four">value 4</label></li> 
 
</ul>