分组复选框切换时无法获取选中值并存入数组的问题求助

Hey there! Let's get this checkbox selection sorted out. The main problem with your current code is that you're gluing all checked values into a single string—this breaks when multiple boxes are checked, and you're not storing the selections in an array like you intended.

Here's the revised code that properly captures checked values into an array, plus handles the "All Genders" checkbox with logical exclusivity (since selecting "All" alongside specific genders usually doesn't make sense):

Updated JavaScript #

// Find elements and listen for change events
$('input:checkbox[name=product]').on('change', function() {
  let selectedValues = [];
  const $allCheckbox = $('input:checkbox[name=product][value=all]');
  const $otherCheckboxes = $('input:checkbox[name=product][value!=all]');

  // Handle "All" checkbox exclusivity
  if ($(this).val() === 'all') {
    if ($(this).is(':checked')) {
      // Uncheck all other boxes if "All" is selected
      $otherCheckboxes.prop('checked', false);
      selectedValues.push('all');
    } else {
      // If "All" is unchecked, collect any remaining checked values
      $otherCheckboxes.filter(':checked').each(function() {
        selectedValues.push($(this).val());
      });
    }
  } else {
    // If a specific gender is checked, uncheck "All"
    if ($(this).is(':checked')) {
      $allCheckbox.prop('checked', false);
    }
    // Collect all checked non-"All" values
    $otherCheckboxes.filter(':checked').each(function() {
      selectedValues.push($(this).val());
    });
  }

  // Now you have your selected values in an array!
  console.log('Selected values:', selectedValues);

  // Example: Handle different selection scenarios
  if (selectedValues.includes('all')) {
    console.log('All genders selected');
  } else if (selectedValues.length === 0) {
    console.log('No genders selected');
  } else {
    console.log('Selected genders:', selectedValues.join(', '));
  }
});

HTML (unchanged, included for context) #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders<br />
<input type="checkbox" name="product" value="women" />Women<br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

Key improvements made: #

• Uses an array (selectedValues) to store checked values instead of a concatenated string, so multiple selections are preserved correctly.
• Adds logical exclusivity for the "All" checkbox: selecting "All" unchecks other options, and selecting any other option unchecks "All" (this is a common UX pattern, but you can remove this logic if you want to allow overlapping selections).
• Clearly separates value collection and scenario handling, making the code easier to read and adjust later.

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