求助：如何通过勾选HTML复选框自动填充指定内容到文本框

Hey there! Let's get your checkbox timing functionality working correctly. The core issue with your current code is that your sequential if statements are overwriting each other's values—for example, if both checkboxes are checked, the individual checkbox checks will set the value twice before the combined condition finally fixes it. We can clean this up with a logical, ordered conditional flow.

First, Let's Understand the Problem #

Your original code runs every if statement in order, so when both boxes are checked:

1. It sets the value to morning hours
2. Then immediately overwrites it to evening hours
3. Finally sets it to the combined hours

This works by accident for the combined case, but fails for others (like checking morning then evening—you'll see the evening value briefly before the combined one kicks in, and unchecking one after both are checked won't update correctly).

Here's the Corrected Code #

Updated JavaScript

function shifting() {
  const morningCheckbox = document.getElementById("morning");
  const eveningCheckbox = document.getElementById("evening");
  const timingInput = document.getElementById("clock-field");

  // Check conditions in order of specificity
  if (morningCheckbox.checked && eveningCheckbox.checked) {
    timingInput.value = "9:00 AM - 7:00 PM";
  } else if (morningCheckbox.checked) {
    timingInput.value = "9:00 AM - 2:00 PM";
  } else if (eveningCheckbox.checked) {
    timingInput.value = "2:00 PM - 7:00 PM";
  } else {
    // Clear the input when neither is checked
    timingInput.value = "";
  }
}

Optional: Improve Event Handling (Better Than Inline onclick)

Instead of adding onclick="shifting()" to your labels, you can bind the change event directly to the checkboxes (this works even if users click the checkbox itself, not just the label):

// Add this at the end of your JS or inside a DOMContentLoaded listener
document.getElementById("morning").addEventListener("change", shifting);
document.getElementById("evening").addEventListener("change", shifting);

If you use this, you can remove the onclick attributes from your HTML labels.

Key Improvements #

• Logical Order: We check the most specific case (both checked) first, then move to individual cases, and finally the default (neither checked). This ensures no value overwrites happen.
• Clearer Variable Names: Renamed variables to be more descriptive (e.g., morningCheckbox instead of morning) for better readability.
• Proper Empty State: Using an empty string "" instead of null to clear the input—this is more standard for form fields.
• Reliable Events: Using change events on checkboxes ensures the function runs whenever the checkbox state changes, regardless of how the user interacts with it.

Your HTML Can Stay Mostly the Same #

You can keep your existing HTML structure—just remove the onclick attributes if you switch to the addEventListener approach:

<!-- Morning -->
<div class="col-6">
  <div class="input-group mb-4 input-group-lg">
    <div class="inputGroup">
      <div class="input-group-prepend">
        <span class="input-group-text"><img src="icon/morningIcon.png" class="pl-1" alt="morning icon"></span>
      </div>
      <input type="checkbox" id="morning" name="working"/>
      <label for="morning" id="morningClick">Morning</label>
    </div>
  </div>
</div>
<!-- Evening -->
<div class="col-6">
  <div class="input-group mb-4 input-group-lg">
    <div class="inputGroup">
      <div class="input-group-prepend">
        <span class="input-group-text"><img src="icon/moonIcon.png" class="pl-1" alt="evening icon"></span>
      </div>
      <input type="checkbox" id="evening" name="working"/>
      <label for="evening" id="eveningClick">Evening</label>
    </div>
  </div>
</div>
<!-- Timing in Shift -->
<div class="input-group mb-4 input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text"><img src="icon/clockIcon.png" class="pl-1" alt="clock icon"></span>
  </div>
  <input type="text" class="form-control" name="clock_field" id="clock-field" placeholder="Timing in Work" disabled="disabled"/>
</div>

This should handle all your cases perfectly:

• Check morning → shows "9:00 AM - 2:00 PM"
• Check evening → shows "2:00 PM - 7:00 PM"
• Check both → shows "9:00 AM - 7:00 PM"
• Uncheck all → clears the input

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