How to select/unselect multiple CheckBoxes by specific checkbox names on Button Click-CodePudding

What would be an easy way to select multiple checkboxes (not all) with a click of a button?

Any suggestion on how to make this easily?

Thanks, EraNet

<script type="text/javascript">
        
            function Select(){
                var items=document.getElementsByName('Red')
                for(var i=0; i<items.length; i  ){
                    if(items[i].type=='checkbox')
                        items[i].checked=true;
                    }

            }
            function UnSelect(){
                var items=document.getElementsByName('Red')
                for(var i=0; i<items.length; i  ){
                    if(items[i].type=='checkbox')
                        items[i].checked=false;
                }
            }           
        </script>

<html>
    <head>
        <title>JavaScript - Select/Unselect multiple CheckBoxes on Button Click.</title>

    </head>
<body>
    <input type="checkbox" name="Red" value="Red">Red<br>
    <input type="checkbox" name="Blue" value="Blue">Blue<br>
    <input type="checkbox" name="Yellow" value="Yellow">Yellow<br>
    <input type="checkbox" name="Orange" value="Orange">Orange<br>
    <input type="checkbox" name="Pink" value="Pink">Pink<br>
    <input type="checkbox" name="Voilet" value="Voilet">Voilet<br>
    <p>
    <input type="button" onclick='Select()' value="Select"/>
    <input type="button" onclick='UnSelect()' value="Unselect"/>
    </p>
</body>
</html>

CodePudding user response：

I added a class name for selecting some/all and then using querySelectorAll() to select the elements that need change.

function Select() {
  // all input elements that has the class name "one"
  var items = document.querySelectorAll('input.one');
  items.forEach(item => item.checked = true);
}

function UnSelect() {
  // all input elements that has a name
  var items = document.querySelectorAll('input[name]');
  items.forEach(item => item.checked = false);
}

<input type="checkbox" class="one" name="Red" value="Red">Red<br>
<input type="checkbox" class="one" name="Blue" value="Blue">Blue<br>
<input type="checkbox" class="one" name="Yellow" value="Yellow">Yellow<br>
<input type="checkbox" class="two" name="Orange" value="Orange">Orange<br>
<input type="checkbox" class="two" name="Pink" value="Pink">Pink<br>
<input type="checkbox" class="two" name="Voilet" value="Voilet">Voilet<br>
<p>
  <input type="button" onclick='Select()' value="Select" />
  <input type="button" onclick='UnSelect()' value="Unselect" />
</p>

CodePudding user response：

Thank you for your suggestion. The reason I would like to have it by name is that I migh have 4 buttons and each button will tick a different combination of boxes. So it will need to be a list of selected names for each button and one button to unselected all.

Thanks, EraNet