Javascript 通过选中html复选框用一些文本填充文本框？

我怎样才能做到这一点。。。 我想在选中“上午”复选框时，在文本框中填入“上午9:00-下午2:00”， 和“2:00 PM-7:00 PM”当我选中“晚间”复选框时，但是当我选中这两个复选框时 文本框中填充此文本“9:00am-7:00pm”，否则创建一个没有文本的文本框

我尝试了一些方法，但没有成功，这是我的HTML标记代码

              <!-- 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="icon"></span>
                      </div>
                      <input type="checkbox" id="morning" name="working"/>
                      <label for="morning" id="morningClick" onclick="shifting()">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="icon"></span>
                    </div>
                    <input type="checkbox" id="evening" name="working"/>
                    <label for="evening" id="eveningClick" onclick="shifting()">Evening</label>
                  </div>
                </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="icon"></span>
                </div>
                <input type="text" class="form-control" name="clock_field" id="clock-field" placeholder="Timing in Work" disabled="disabled"/>
            </div>

}

我的表格是这样的

---

这应该让你开始（尽管有明显的问题）

您的代码有两个问题：

您依靠单击标签来触发函数并选中勾选框，如果这样做，函数将在单击该复选框之前运行。因此，当用户单击标签时，即使预期为true，但在执行函数时仍然为false

单击复选框不会触发该功能

---

onClick事件应该在输入标记中，如下所示

<input type="checkbox" id="evening" name="working" onclick="shifting();"/>

---

不是一个非常优化的代码，但这应该适合您：

const mng=“上午9:00-下午2:00”；
const eve=“下午2:00-7:00”；
const tware=“上午9:00-下午7:00”；
var countChecked=函数（）{
var n=$（“输入：已选中”）.length；
$（“div”）.text（n+（n==1？“is”：“are”）+“checked！”）；
如果（n==2）{
$（'日'）.val（两者）；
}  
else if（$（'CheckMng'）.prop（“checked”）=true）和&（n==1））{
$（'日'）.val（mng）；
}
else if（$（'CheckEve'）.prop（“checked”）==true）和&（n==1））{
$（'日'）.val（夏娃）；
}
其他的
{
$（'日'）.val（“”）；
}   
};
countChecked（）；
$（“输入[类型=复选框]”）。单击（“单击”，计数已选中）

为什么不使用24小时时间选择器，完全避免问题，让用户的UI更容易使用？如果您需要更具体的帮助，请编辑问题，将您编写的代码包括在内，以便自己解决此问题。我同意Rory的意见，如果您仍然需要上面列出的代码，请让我们知道……并显示您的代码。您的问题缺少任何其他用户可以尝试帮助您的真实数据。请查看并更新您的问题，提供更多信息。感谢大家，这是我的代码JS和HTMLWhat关于第三种情况？如果选中了这两个复选框？您选中了一个数据类型not checked HTML复选框我很高兴能帮上忙！如果你认为值得，你介意投票并接受它作为答案吗？我的名声不到15@James你接受了一个不起作用的答案？！
<input type="text" id="output" />

<div>
  <input type="radio" onclick="selectTimeOfDay('morning')" value="Morning" />
  <span>Morning</span><br />
  <input type="radio" onclick="selectTimeOfDay('evening')" value="Evening" />
  <span>Evening</span>
</div>

const morningTimeString = "9:00 AM - 2:00 PM";
const eveningTimeString = "2:00 PM - 7:00 PM";

const output = document.getElementById("output");
function selectTimeOfDay(t) {
    if (t === "morning") {
    output.value = morningTimeString;
  }
  else if (t === "evening") {
    output.value = eveningTimeString;
  }
}

<input type="checkbox" id="evening" name="working" onclick="shifting();"/>