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
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;
}
}<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>I added a class name for selecting some/all and then using querySelectorAll() to select the elements that need change.
I extended the example with more "select buttons", so that you can see that querySelectorAll() is flexible in the input elements that you would like to update.
function Select(str) {
UnSelect();
// all input elements that has the class name "one"
var items = document.querySelectorAll(str);
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 three" name="Yellow" value="Yellow">Yellow<br>
<input type="checkbox" class="two three" 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('input.one')" value="Select by classname 'one'" />
<input type="button" onclick="Select(`input[name = 'Blue']`)" value="Select by name 'Blue'" />
<input type="button" onclick="Select(`input[name = 'Blue'],input[name = 'Pink']`)" value="Select by name 'Blue' and 'Pink'" />
<input type="button" onclick="Select(`input.three`)" value="Select by classname 'three'" />
<input type="button" onclick='UnSelect()' value="Unselect" />
</p>