floriangosse · September 10, 2024 10:20
diff --git a/bulk-operations.html b/bulk-operations.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Products</title>
        <style>
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            html {
                font-size: 16px;
                font-family: Arial, sans-serif;
            }

            body {
                margin: 0;
                padding: 1.5rem;
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }

            th,
            td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            th {
                background-color: #f2f2f2;
                border-bottom: 2px solid #ddd;
            }

            tbody > tr:nth-child(even) {
                background-color: #f2f2f2;
            }

            td:first-child,
            th:first-child {
                width: 1%;
                white-space: nowrap;
            }

            #bulk {
                margin-top: 1rem;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- We don't need to set the name attribute here as we don't want to submit this checkbox -->
                        <input type="checkbox" id="toggle-select-all" />
                    </th>
                    <th>Id</th>
                    <th>Product Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- We reference the form id here to associate this checkbox with the form -->
                        <input
                            type="checkbox"
                            name="items[]"
                            value="1"
                            form="bulk"
                        />
                    </td>
                    <td>1</td>
                    <td>Tasty Steel Soap</td>
                </tr>
                <tr>
                    <td>
                        <input
                            type="checkbox"
                            name="items[]"
                            value="2"
                            form="bulk"
                        />
                    </td>
                    <td>2</td>
                    <td>Refined Fresh Soap</td>
                </tr>
                <tr>
                    <td>
                        <input
                            type="checkbox"
                            name="items[]"
                            value="3"
                            form="bulk"
                        />
                    </td>
                    <td>3</td>
                    <td>Rustic Fresh Chicken</td>
                </tr>
                <tr>
                    <td>
                        <input
                            type="checkbox"
                            name="items[]"
                            value="4"
                            form="bulk"
                        />
                    </td>
                    <td>4</td>
                    <td>Refined Soft Car</td>
                </tr>
                <tr>
                    <td>
                        <input
                            type="checkbox"
                            name="items[]"
                            value="5"
                            form="bulk"
                        />
                    </td>
                    <td>5</td>
                    <td>Small Granite Towels</td>
                </tr>
            </tbody>
        </table>

        <form id="bulk" method="get">
            Bulk Actions:

            <!-- Giving the button a name and value attribute allows us to identify which button was clicked -->
            <button type="submit" name="bulk_operation" value="publish">
                Publish
            </button>
            <button type="submit" name="bulk_operation" value="delete">
                Delete
            </button>
        </form>

        <script>
            const toggleSelectAll =
                document.getElementById('toggle-select-all');
            const checkboxes = document.querySelectorAll(
                'input[type="checkbox"][name="items[]"]'
            );

            toggleSelectAll.addEventListener('change', () => {
                checkboxes.forEach((checkbox) => {
                    checkbox.checked = toggleSelectAll.checked;
                });
            });

            checkboxes.forEach((checkbox) => {
                checkbox.addEventListener('change', () => {
                    const status = [...checkboxes].map(
                        (checkbox) => checkbox.checked
                    );

                    const every = status.every((checked) => checked);
                    const some = status.some((checked) => checked);

                    toggleSelectAll.checked = every;
                    toggleSelectAll.indeterminate = !every && every !== some;
                });
            });
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Products</title>
	<style>
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	html {
	font-size: 16px;
	font-family: Arial, sans-serif;
	}

	body {
	margin: 0;
	padding: 1.5rem;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	th,
	td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	}

	th {
	background-color: #f2f2f2;
	border-bottom: 2px solid #ddd;
	}

	tbody > tr:nth-child(even) {
	background-color: #f2f2f2;
	}

	td:first-child,
	th:first-child {
	width: 1%;
	white-space: nowrap;
	}

	#bulk {
	margin-top: 1rem;
	}
	</style>
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<th>
	<!-- We don't need to set the name attribute here as we don't want to submit this checkbox -->
	<input type="checkbox" id="toggle-select-all" />
	</th>
	<th>Id</th>
	<th>Product Name</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>
	<!-- We reference the form id here to associate this checkbox with the form -->
	<input
	type="checkbox"
	name="items[]"
	value="1"
	form="bulk"
	/>
	</td>
	<td>1</td>
	<td>Tasty Steel Soap</td>
	</tr>
	<tr>
	<td>
	<input
	type="checkbox"
	name="items[]"
	value="2"
	form="bulk"
	/>
	</td>
	<td>2</td>
	<td>Refined Fresh Soap</td>
	</tr>
	<tr>
	<td>
	<input
	type="checkbox"
	name="items[]"
	value="3"
	form="bulk"
	/>
	</td>
	<td>3</td>
	<td>Rustic Fresh Chicken</td>
	</tr>
	<tr>
	<td>
	<input
	type="checkbox"
	name="items[]"
	value="4"
	form="bulk"
	/>
	</td>
	<td>4</td>
	<td>Refined Soft Car</td>
	</tr>
	<tr>
	<td>
	<input
	type="checkbox"
	name="items[]"
	value="5"
	form="bulk"
	/>
	</td>
	<td>5</td>
	<td>Small Granite Towels</td>
	</tr>
	</tbody>
	</table>

	<form id="bulk" method="get">
	Bulk Actions:

	<!-- Giving the button a name and value attribute allows us to identify which button was clicked -->
	<button type="submit" name="bulk_operation" value="publish">
	Publish
	</button>
	<button type="submit" name="bulk_operation" value="delete">
	Delete
	</button>
	</form>

	<script>
	const toggleSelectAll =
	document.getElementById('toggle-select-all');
	const checkboxes = document.querySelectorAll(
	'input[type="checkbox"][name="items[]"]'
	);

	toggleSelectAll.addEventListener('change', () => {
	checkboxes.forEach((checkbox) => {
	checkbox.checked = toggleSelectAll.checked;
	});
	});

	checkboxes.forEach((checkbox) => {
	checkbox.addEventListener('change', () => {
	const status = [...checkboxes].map(
	(checkbox) => checkbox.checked
	);

	const every = status.every((checked) => checked);
	const some = status.some((checked) => checked);

	toggleSelectAll.checked = every;
	toggleSelectAll.indeterminate = !every && every !== some;
	});
	});
	</script>
	</body>
	</html>