crux · July 25, 2025 11:28 · crux · Jul 25, 2025
diff --git a/checkbox-group-value.markdown b/checkbox-group-value.markdown
diff --git a/index.html b/index.html
 HTML Structure for testing (place this in your <body>):

 <fieldset>
    <legend>Multiple Checkboxes</legend>
    <input type="checkbox" id="cb1" class="my-checkbox-group">
    <label for="cb1">Checkbox 1</label><br>
    <input type="checkbox" id="cb2" class="my-checkbox-group">
    <label for="cb2">Checkbox 2</label><br>
    <input type="checkbox" id="cb3" class="my-checkbox-group">
    <label for="cb3">Checkbox 3</label><br>
    <p>State: <span id="multiCheckboxState"></span></p>
 </fieldset>

 <fieldset>
    <legend>Single Checkbox</legend>
    <input type="checkbox" id="singleCb" class="my-single-checkbox">
    <label for="singleCb">Single Checkbox</label><br>
    <p>State: <span id="singleCheckboxState"></span></p>
 </fieldset>

 <fieldset>
    <legend>Empty/No Checkboxes</legend>
    <div id="emptyContainer"></div>
    <p>State: <span id="emptyState"></span></p>
 </fieldset> 
diff --git a/script.js b/script.js
 /**
 * Determines the check state of a list of checkboxes.
 *
 * @param {NodeListOf<HTMLInputElement>|HTMLInputElement[]} checkboxList
 * A list (e.g., NodeList from querySelectorAll, or a plain array)
 * of checkbox HTMLInputElement elements.
 * @returns {string} One of: "none", "one", "some", "all".
 */
 function getCheckboxCheckState(checkboxList) {
    // Ensure we have a valid list to work with.
    // If the list is empty or null/undefined, no checkboxes are checked.
    if (!checkboxList || checkboxList.length === 0) {
        return "none";
    }

    const totalCount = checkboxList.length;
    let checkedCount = 0;

    // Iterate through the list and count how many checkboxes are checked.
    // Array.from() is used to ensure compatibility with NodeList and other array-like objects.
    Array.from(checkboxList).forEach(checkbox => {
        if (checkbox.checked) {
            checkedCount++;
        }
    });

    // Determine the state based on the counts.
    if (checkedCount === 0) {
        return "none"; // No checkboxes are checked.
    } else if (checkedCount === totalCount) {
        // All checkboxes are checked.
        // This includes the case where there is only one checkbox and it is checked.
        return "all";
    } else if (checkedCount === 1) {
        // Exactly one checkbox is checked, AND it's not "all" (meaning totalCount > 1).
        return "one";
    } else { // checkedCount > 1 && checkedCount < totalCount
        // More than one, but not all, checkboxes are checked.
        return "some";
    }
 }

 document.addEventListener('DOMContentLoaded', () => {
    // Get NodeLists of checkboxes
    const multiCheckboxes = document.querySelectorAll('.my-checkbox-group');
    const singleCheckbox = document.querySelectorAll('.my-single-checkbox');
    const emptyCheckboxes = document.querySelectorAll('#emptyContainer input[type="checkbox"]'); // This will be an empty NodeList

    // Get display elements
    const multiCheckboxStateSpan = document.getElementById('multiCheckboxState');
    const singleCheckboxStateSpan = document.getElementById('singleCheckboxState');
    const emptyStateSpan = document.getElementById('emptyState');

    // Function to update the displayed states
    function updateDisplayStates() {
        multiCheckboxStateSpan.textContent = getCheckboxCheckState(multiCheckboxes);
        singleCheckboxStateSpan.textContent = getCheckboxCheckState(singleCheckbox);
        emptyStateSpan.textContent = getCheckboxCheckState(emptyCheckboxes);
    }

    // Initial update when the page loads
    updateDisplayStates();

    // Add event listeners to all checkboxes to update the state dynamically on change
    multiCheckboxes.forEach(cb => cb.addEventListener('change', updateDisplayStates));
    singleCheckbox.forEach(cb => cb.addEventListener('change', updateDisplayStates));
 });
	HTML Structure for testing (place this in your <body>):

	<fieldset>
	<legend>Multiple Checkboxes</legend>
	<input type="checkbox" id="cb1" class="my-checkbox-group">
	<label for="cb1">Checkbox 1</label><br>
	<input type="checkbox" id="cb2" class="my-checkbox-group">
	<label for="cb2">Checkbox 2</label><br>
	<input type="checkbox" id="cb3" class="my-checkbox-group">
	<label for="cb3">Checkbox 3</label><br>
	<p>State: <span id="multiCheckboxState"></span></p>
	</fieldset>

	<fieldset>
	<legend>Single Checkbox</legend>
	<input type="checkbox" id="singleCb" class="my-single-checkbox">
	<label for="singleCb">Single Checkbox</label><br>
	<p>State: <span id="singleCheckboxState"></span></p>
	</fieldset>

	<fieldset>
	<legend>Empty/No Checkboxes</legend>
	<div id="emptyContainer"></div>
	<p>State: <span id="emptyState"></span></p>
	</fieldset>
	/**
	* Determines the check state of a list of checkboxes.
	*
	* @param {NodeListOf<HTMLInputElement>\|HTMLInputElement[]} checkboxList
	* A list (e.g., NodeList from querySelectorAll, or a plain array)
	* of checkbox HTMLInputElement elements.
	* @returns {string} One of: "none", "one", "some", "all".
	*/
	function getCheckboxCheckState(checkboxList) {
	// Ensure we have a valid list to work with.
	// If the list is empty or null/undefined, no checkboxes are checked.
	if (!checkboxList \|\| checkboxList.length === 0) {
	return "none";
	}

	const totalCount = checkboxList.length;
	let checkedCount = 0;

	// Iterate through the list and count how many checkboxes are checked.
	// Array.from() is used to ensure compatibility with NodeList and other array-like objects.
	Array.from(checkboxList).forEach(checkbox => {
	if (checkbox.checked) {
	checkedCount++;
	}
	});

	// Determine the state based on the counts.
	if (checkedCount === 0) {
	return "none"; // No checkboxes are checked.
	} else if (checkedCount === totalCount) {
	// All checkboxes are checked.
	// This includes the case where there is only one checkbox and it is checked.
	return "all";
	} else if (checkedCount === 1) {
	// Exactly one checkbox is checked, AND it's not "all" (meaning totalCount > 1).
	return "one";
	} else { // checkedCount > 1 && checkedCount < totalCount
	// More than one, but not all, checkboxes are checked.
	return "some";
	}
	}

	document.addEventListener('DOMContentLoaded', () => {
	// Get NodeLists of checkboxes
	const multiCheckboxes = document.querySelectorAll('.my-checkbox-group');
	const singleCheckbox = document.querySelectorAll('.my-single-checkbox');
	const emptyCheckboxes = document.querySelectorAll('#emptyContainer input[type="checkbox"]'); // This will be an empty NodeList

	// Get display elements
	const multiCheckboxStateSpan = document.getElementById('multiCheckboxState');
	const singleCheckboxStateSpan = document.getElementById('singleCheckboxState');
	const emptyStateSpan = document.getElementById('emptyState');

	// Function to update the displayed states
	function updateDisplayStates() {
	multiCheckboxStateSpan.textContent = getCheckboxCheckState(multiCheckboxes);
	singleCheckboxStateSpan.textContent = getCheckboxCheckState(singleCheckbox);
	emptyStateSpan.textContent = getCheckboxCheckState(emptyCheckboxes);
	}

	// Initial update when the page loads
	updateDisplayStates();

	// Add event listeners to all checkboxes to update the state dynamically on change
	multiCheckboxes.forEach(cb => cb.addEventListener('change', updateDisplayStates));
	singleCheckbox.forEach(cb => cb.addEventListener('change', updateDisplayStates));
	});