JS: Viele Checkboxen gleichzeitig anhaken

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Freitag, 28. Februar 2020 um 12:14 Uhr (9/2020 Kalenderwoche)

geändert: Mittwoch, 26. November 2025 um 10:24 Uhr (48/2025 Kalenderwoche)

Keywords: unchecked checked inner nachfrage confirm

Kategorien: HTML, JavaScript,

Text:

Viele Checkboxen gleichzeitig anhaken (checked) oder enthaken (unchecked) und Meldungen mit innerHtml/innerText anzeigen, bzw. Html-Label ändern.

Quellcode:   

## Version 1a: ######################################################
<form action="" accept-charset="utf-8">
    <div style="margin-bottom: 10px;">
        <button type="button" onclick="document.querySelectorAll('input[name$=\'projektKey[]\']').forEach(cb => cb.checked = true)">
            Alle auswählen
        </button>
        <button type="button" onclick="document.querySelectorAll('input[name$=\'projektKey[]\']').forEach(cb => cb.checked = false)">
            Keine auswählen
        </button>
        <button type="button" onclick="document.querySelectorAll('input[name$=\'projektKey[]\']').forEach(cb => cb.checked = !cb.checked)">
            Auswahl umkehren
        </button>
    </div>
    <label>
        [<input type="checkbox" name="steuerboxProjektKeys"  id="steuerboxProjektKeys"
                onchange="checkAllCheckboxes(this,
                                             'steuerboxProjektKeys',
                                             'projektKey[]',
                                             'Projekt-Keys',
                                             'textAlleHakenProjektKeys');">
        <span id="textAlleHakenProjektKeys">ALLE</span>]</label>
    <br><input type="checkbox" name="projektKey[]" value="111">
    <br><input type="checkbox" name="projektKey[]" value="222">
    <br><input type="checkbox" name="projektKey[]" value="333">
    <br><input type="checkbox" name="projektKey[]" value="444">
    <br><input type="checkbox" name="projektKey[]" value="555">
    <br><input type="checkbox" name="projektKey[]" value="666">
    <br><input type="checkbox" name="projektKey[]" value="777">
</form>

## Version 1b: ######################################################
<button type="button" 
        onclick="document.querySelectorAll('input[name$=\'tabellenZurModifizierung[]\']').forEach(cb => cb.checked = true)"
		>Alle auswählen</button>
<button type="button" 
		onclick="document.querySelectorAll('input[name$=\'tabellenZurModifizierung[]\']').forEach(cb => cb.checked = false)"
		>Keine auswählen</button>
<button type="button" 
		onclick="document.querySelectorAll('input[name$=\'tabellenZurModifizierung[]\']').forEach(cb => cb.checked = !cb.checked)"
		>Auswahl umkehren</button>
<ul>
	<?php
	foreach ($array as $name => $info) {
		echo '
			<li><label>
				<input type="checkbox" name="' . DB_NAME . 'tabellenZurModifizierung[]" value="' . $name . '"'
			. (in_array($name, TABELLEN_ZUR_MODIFIZIERUNG) ? ' checked' : '')
			. '> "' . $name . '"</label></li>';

	}
	?>
</ul>

## Version 2: ######################################################
<form action="" accept-charset="utf-8">
    <label>
        [<input type="checkbox" name="steuerboxProjektKeys"  id="steuerboxProjektKeys"
                onchange="checkAllCheckboxes(this, 
                                             'steuerboxProjektKeys', 
                                             'projektKey[]', 
                                             'Projekt-Keys', 
                                             'textAlleHakenProjektKeys');">
            <span id="textAlleHakenProjektKeys">ALLE</span>]</label>
        
<br><input type="checkbox" name="projektKey[]" value="111">
<br><input type="checkbox" name="projektKey[]" value="222">
<br><input type="checkbox" name="projektKey[]" value="333">
<br><input type="checkbox" name="projektKey[]" value="444">
<br><input type="checkbox" name="projektKey[]" value="555">
<br><input type="checkbox" name="projektKey[]" value="666">
<br><input type="checkbox" name="projektKey[]" value="777">

</form>

<script>
    function checkAllCheckboxes(source, steuerboxId, checkboxName, bereich, labelTextId) {
        const checkbox1 = document.getElementById(steuerboxId);
        if (checkbox1.checked === true) {
            nachfrage = "Möchten Sie alle " + bereich + " anhaken?";
            resetCheckbox = false;
        } else {
            nachfrage = "Möchten Sie alle Haken bei " + bereich + " entfernen?";
            resetCheckbox = true;
        }
        confirmAsk = confirm(nachfrage + '\n\nJa = Ok\nNein = Abbrechen');
        if (confirmAsk !== false) {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            if (checkbox1) {
                var c = checkbox1.checked;
            }
            if (checkbox1.checked === true) {
                document.getElementById(steuerboxId).title = "Alle Haken entfernen...";
                document.getElementById(labelTextId).innerHTML = "Haken entfernen...";
            } else {
                document.getElementById(steuerboxId).title = "Alle Projekte anhaken...";
                document.getElementById(labelTextId).innerHTML = "Alle Haken setzen...";
            }
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i] !== source) {
                    if (checkboxes[i].name === checkboxName) {
                        checkboxes[i].checked = source.checked;
                    }
                }
            }
        } else {
            alert('Der Vorgang wurde abgebrochen!');
            document.getElementById(steuerboxId).checked = resetCheckbox;
        }//ENDE: else ==> if (!empty())
    }
</script>