如何优化表单中多组单选Checkbox的jQuery代码并实现必填验证

Nice catch on the repetitive code—let's fix that and add the required validation you need. Here's a clean, scalable solution that works for any number of checkbox groups, no matter how many you add later:

1. Refactor Your HTML for Better Grouping #

First, we'll restructure your HTML to group each field set together and use a single shared class for all your "radio-style" checkboxes. This eliminates the need for unique classes like check3, check4, etc. We'll also wrap everything in a <form> tag to enable submit validation:

<form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <!-- Gender Group -->
  <div class="form-group">
    <div class="border border-dark col-sm-3">
      <h4 class="d-inline">Gender</h4>
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="gender">Male
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="gender">Female
    </div>
    <div class="border border-dark col-sm-5">
      <input type="checkbox" class="group-checkbox" name="gender">Transgender
    </div>
  </div>

  <!-- Marital Status Group -->
  <div class="form-group">
    <div class="border border-dark col-sm-3">
      <h4 class="d-inline">Marital Status</h4>
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="marital_status">Married
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="marital_status">Unmarried
    </div>
    <div class="border border-dark col-sm-5">
      <input type="checkbox" class="group-checkbox" name="marital_status">Others
    </div>
  </div>

  <!-- Nationality Group -->
  <div class="form-group">
    <div class="border border-dark col-sm-3">
      <h4 class="d-inline">Nationality</h4>
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="nationality">IN-Indian
    </div>
    <div class="border border-dark col-sm-7">
      <input type="checkbox" class="group-checkbox" name="nationality">Others(ISO 3166 Country Code)
    </div>
  </div>

  <!-- Resident Status Group -->
  <div class="form-group">
    <div class="border border-dark col-sm-3">
      <h4 class="d-inline">Residental Status</h4>
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="residential_status">Resident Individual
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="residential_status">Non Resident Indian
    </div>
    <div class="border border-dark col-sm-2">
      <input type="checkbox" class="group-checkbox" name="residential_status">Foreign National
    </div>
    <div class="border border-dark col-sm-3">
      <input type="checkbox" class="group-checkbox" name="residential_status">Person of Indian Origin
    </div>
  </div>

  <input type="submit">
</form>

<!-- Optional: Add error styling for clarity -->
<style>
.form-group.error {
  border: 1px solid #dc3545;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>

Key changes here:

• All checkboxes use the shared group-checkbox class
• Each field set is wrapped in a .form-group container
• Added name attributes to each group (e.g., name="gender") to make backend data handling easier (only the selected option will be submitted)

2. Optimized jQuery Code (No Repetition!) #

Now we can replace all your duplicate click handlers with a single, reusable function. We'll also add form submission validation to ensure every group has exactly one option selected:

$(document).ready(function() {
  // Single handler for all radio-style checkbox groups
  $('.group-checkbox').click(function() {
    // Find the parent group of the clicked checkbox
    const $parentGroup = $(this).closest('.form-group');
    // Uncheck all other checkboxes in the same group
    $parentGroup.find('.group-checkbox').not(this).prop('checked', false);
  });

  // Form submission validation
  $('form').submit(function(e) {
    let formIsValid = true;

    // Check each group for a selected option
    $('.form-group').each(function() {
      const hasSelectedOption = $(this).find('.group-checkbox:checked').length > 0;
      
      if (!hasSelectedOption) {
        formIsValid = false;
        // Mark the group as errored and show a user-friendly message
        $(this).addClass('error');
        const fieldName = $(this).find('h4').text().trim();
        alert(`Please select an option for ${fieldName}`);
      } else {
        $(this).removeClass('error');
      }
    });

    // Prevent form submission if any group is incomplete
    if (!formIsValid) {
      e.preventDefault();
    }
  });
});

How This Works: #

• The click handler uses closest('.form-group') to target only the checkboxes in the same group as the clicked one—no more hardcoding class names for each group.
• On form submit, we loop through every .form-group to check if at least one checkbox is selected. If not, we block submission and alert the user.
• The optional error styling makes it clear which fields need attention.

Bonus Tips #

• If you want to avoid alert boxes, you could add inline error messages below each group instead (e.g., <span class="error-text">This field is required</span>).
• For even better accessibility, add aria-required="true" to each checkbox group and update focus states for errored fields.

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam