I have more than 60 customer need to select using checkbox, I have done this so I can select individual 1 or more customer and also select all function to select all the customers.
Now I want to to break this customer selection into 3 parts, every part has the select all function, but I am facing problem for doing that. Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox and Select All</title>
</head>
<body>
<h1>Checkbox and Select All</h1>
<div id="section-1">
<h2>Section 1</h2>
<input type="checkbox" id="select-all-section-1">
<label for="select-all-section-1">Select All</label>
<ul id="customer-codes-section-1">
<li><input type="checkbox" name="customer-code" value="HAN01">HAN01</li>
<li><input type="checkbox" name="customer-code" value="HAN02">HAN02</li>
<li><input type="checkbox" name="customer-code" value="HAN03">HAN03</li>
<li><input type="checkbox" name="customer-code" value="HAN04">HAN04</li>
</ul>
</div>
<div id="section-2">
<h2>Section 2</h2>
<input type="checkbox" id="select-all-section-2">
<label for="select-all-section-2">Select All</label>
<ul id="customer-codes-section-2">
<li><input type="checkbox" name="customer-code" value="ABC01">ABC01</li>
<li><input type="checkbox" name="customer-code" value="ABC02">ABC02</li>
<li><input type="checkbox" name="customer-code" value="ABC03">ABC03</li>
<li><input type="checkbox" name="customer-code" value="ABC04">ABC04</li>
<li><input type="checkbox" name="customer-code" value="ABC05">ABC05</li>
</ul>
</div>
<button type="button" id="submit-button">Submit</button>
<script>
const selectAllCheckboxes = document.querySelectorAll('input[id^="select-all-section-"]');
const customerCodeCheckboxes = document.querySelectorAll('input[name^="customer-code-section-"]');
const submitButton = document.querySelector('#submit-button');
// Add a click event listener to each select all checkbox
selectAllCheckboxes.forEach(checkbox => {
checkbox.addEventListener('click', () => {
// Get the corresponding section element
const sectionElement = document.querySelector(`#${checkbox.id.split('-')[2]}`);
// Get all of the customer code checkboxes in the section
const sectionCustomerCodeCheckboxes = sectionElement.querySelectorAll('input[type="checkbox"]');
// Select or deselect all of the customer code checkboxes in the section, depending on the state of the select all checkbox
sectionCustomerCodeCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
});
});
// Add a click event listener to the submit button
submitButton.addEventListener('click', () => {
// Get the selected customer code IDs
const selectedCustomerCodeIds = customerCodeCheckboxes.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
// Log the selected customer code IDs to the console
console.log('Selected customer code IDs:', selectedCustomerCodeIds);
});
</script>
</body>
</html>
What am I doing wrong?
I tried many times, and it wont select all in every part. I need any suggestion please
Aucun commentaire:
Enregistrer un commentaire