如何将复选框Input的值设置为其兄弟Select选项的值？

Got it, let's tackle this problem. You want to sync the value of a checkbox input with the selected value of its sibling <select> element. Here's a straightforward way to do this with both vanilla JavaScript and jQuery, depending on what you're using in your project.

First, Let's Clarify the DOM Structure #

Since your provided HTML only includes the <select> element, I'll assume a common sibling structure (adjust the selectors if your layout is different):

<div class="team-group">
  <!-- Your checkbox input -->
  <input type="checkbox" class="team-checkbox" name="team-checkbox[]">
  <!-- Your existing select element -->
  <select name="team[]" class="form-control team">
    <option></option>
    <?php foreach ($teams as $team): ?>
      <?php 
        $selected = '';
        if (isset($edit)) {
          $selected = (in_array($team->id, $availableTeams)) ? ' selected' : '';
        }
      ?>
      <option value="<?php echo $team->id; ?>" <?php echo $selected; ?>>
        <?php echo $team->title; ?>
      </option>
    <?php endforeach; ?>
  </select>
</div>

Vanilla JavaScript Solution #

This will work without any libraries, and handles both initial page load and real-time updates when the select changes:

// Wait for the DOM to fully load before running code
document.addEventListener('DOMContentLoaded', function() {
  // Grab all your team select elements (using the .team class)
  const teamSelects = document.querySelectorAll('.team');

  teamSelects.forEach(select => {
    // Find the sibling checkbox (adjust the selector if your checkbox has a different class/attribute)
    const checkbox = select.closest('.team-group').querySelector('.team-checkbox');
    
    if (checkbox) {
      // Set initial checkbox value to the currently selected option
      checkbox.value = select.value;

      // Update checkbox value whenever the select option changes
      select.addEventListener('change', function() {
        checkbox.value = this.value;
      });
    }
  });
});

Key Notes for Vanilla JS: #

• closest('.team-group') helps us target the parent container of both elements, which is more reliable than just relying on direct siblings if there are other elements in between.
• We use querySelectorAll('.team') to handle multiple select/checkbox pairs (since your name attribute uses [], I assume you have multiple groups).
• The change event listener ensures the checkbox value updates immediately when the user picks a new option.

jQuery Solution (If You're Using jQuery) #

If your project already uses jQuery, this is a more concise version:

$(document).ready(function() {
  // Initialize checkbox values on page load
  $('.team').each(function() {
    $(this).closest('.team-group').find('.team-checkbox').val($(this).val());
  });

  // Update checkbox value when select changes
  $('.team').on('change', function() {
    $(this).closest('.team-group').find('.team-checkbox').val($(this).val());
  });
});

Quick Adjustments #

• If your checkbox is a direct sibling (no other elements between it and the select), you can replace closest('.team-group').find('.team-checkbox') with siblings('.team-checkbox') for even shorter code.
• Double-check that the class names match what you're using in your HTML (adjust .team-checkbox or .team-group if your classes are different).

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