Got it, let's tweak your code to meet all your requirements! Here's the revised version that handles checking/unchecking boxes, adding/removing values in the textarea with line breaks, and the special "all" functionality:

Modified HTML #

First, I gave the "all" checkbox a unique ID to make it easier to target in our JavaScript:

<textarea rows="8" name="mobile" class="form-control" id="mobile" placeholder=""></textarea>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="allCheck">
  <label class="custom-control-label" for="allCheck">all</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" value="1" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">1</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" value="2" id="customCheck3">
  <label class="custom-control-label" for="customCheck3">2</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" value="3" id="customCheck4">
  <label class="custom-control-label" for="customCheck4">3</label>
</div>

Updated JavaScript #

This code tracks selected values, syncs checkbox states, and updates the textarea properly:

const allCheckbox = document.getElementById('allCheck');
const checkboxes = document.querySelectorAll('.custom-control-input:not(#allCheck)');
const mobileTextarea = document.getElementById('mobile');
let selectedValues = [];

// Helper to update textarea with selected values (each on new line)
function updateTextarea() {
  mobileTextarea.value = selectedValues.join('\n');
}

// Helper to check if all regular checkboxes are selected
function areAllCheckboxesSelected() {
  return Array.from(checkboxes).every(checkbox => checkbox.checked);
}

// Handle clicks on regular checkboxes
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', () => {
    const value = checkbox.value;
    
    if (checkbox.checked) {
      // Add value to our array if it's not already there
      if (!selectedValues.includes(value)) {
        selectedValues.push(value);
      }
    } else {
      // Remove the value from our array
      selectedValues = selectedValues.filter(val => val !== value);
      // Uncheck "all" if any regular box is unchecked
      allCheckbox.checked = false;
    }
    
    // Auto-check "all" if every regular box is selected
    allCheckbox.checked = areAllCheckboxesSelected();
    
    // Update the textarea
    updateTextarea();
  });
});

// Handle clicks on the "all" checkbox
allCheckbox.addEventListener('click', () => {
  if (allCheckbox.checked) {
    // Check all regular boxes and collect their values
    selectedValues = Array.from(checkboxes).map(checkbox => {
      checkbox.checked = true;
      return checkbox.value;
    });
  } else {
    // Uncheck all regular boxes and clear our value array
    checkboxes.forEach(checkbox => checkbox.checked = false);
    selectedValues = [];
  }
  
  // Update the textarea
  updateTextarea();
});

How it works: #

• We use an array selectedValues to keep track of which options are checked, so we can easily add/remove values and format them with line breaks.
• When you check a regular box, its value gets added to the array; unchecking removes it. The "all" box will automatically check itself if every regular box is selected, and uncheck if any are deselected.
• Checking "all" will select every regular box and populate the textarea with all values. Unchecking "all" clears all boxes and the textarea.
• The updateTextarea function ensures the textarea always shows the current selected values, each on a new line using join('\n').

内容的提问来源于stack exchange，提问作者osori