¿Cuál sería una manera fácil de seleccionar varias casillas de verificación (no todas) con solo hacer clic en un botón?
¿Alguna sugerencia sobre cómo hacer esto fácilmente?
Gracias, 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>Agregué un nombre de clase para seleccionar algunos/todos y luego usar querySelectorAll() para seleccionar los elementos que necesitan cambios.
Extendí el ejemplo con más "botones de selección", para que pueda ver que querySelectorAll() es flexible en los elementos de entrada que le gustaría actualizar.
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>