Заполнить текстовое поле некоторым текстом, установив флажок html?

Question

Как я могу это сделать ... Я хочу заполнить текстовое поле этим " 9: 00 AM - 14:00 ", когда я проверяю " morning" 'и' 14:00 - 19:00 ', когда я отмечаю' Вечер ', НО , когда я проверяю эти два флажка текстовое поле , заполненное этим текстом " 9: 00 AM - 7:00 PM ", иначе создайте текстовое поле без текста.

Я пытаюсь каким-то образом, но не работает, это мой HTML код разметки

А это JS код

function shifting() {
var morning = document.getElementById("morning");
var evening = document.getElementById("evening");
var working = document.getElementById("clock-field");

// If the checkbox is checked, display the output text
// morning
if (morning.checked == true){
    working.value = "9:00AM - 2:00PM";
}
if (morning.checked == false){
    working.value = null;
}

//evening
if (evening.checked == true){
    working.value = "2:00PM - 7:00PM";
}
if (evening.checked == false){
    working.value = null;
}

//morning and evening
if (morning.checked == true && evening.checked == true){
    working.value = "9:00AM - 7:00PM";
}
if (morning.checked == false && evening.checked == false){
    working.value = null;
}

}

Моя форма такая введите описание изображения здесь

Answer 1

Не очень оптимизированный код, но он должен работать для вас:

const mng = "9:00 AM - 2:00 PM";
const eve = "2:00 PM - 7:00 PM";
const both = "9:00 AM - 7:00 PM";


var countChecked = function() {
  var n = $("input:checked").length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
  
  if(n===2){
    $('#day').val(both);
  }  
  else if(($('#CheckMng').prop("checked") == true) && (n == 1)){
    $('#day').val(mng);  
  }
  else if(($('#CheckEve').prop("checked") == true) && (n == 1)){
    $('#day').val(eve);  
  }
  else
  {
    $('#day').val("");
  }   
};
countChecked();     
$( "input[type=checkbox]" ).on( "click", countChecked );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="CheckMng">
    <input type="checkbox" id="CheckEve" >
    <div></div>
    <input type="text" id="day">

Answer 2

В вашем коде есть 2 ошибки:

1. Вы полагаетесь на нажатие метки для запуска функции и установки флажка. Если вы это сделаете, функция запускается до того, как флажок будет установлен щелкнул. Поэтому, когда пользователь щелкает метку, хотя ожидалось, что она будет истинной, она все еще была ложной во время выполнения функции.

2. Нажатие на флажок не вызывает функцию.

Answer 3

Ваше событие onClick должно быть во входном теге, как этот

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

Answer 4

Это должно помочь вам начать (хотя есть очевидные проблемы)

<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>

И Javascript

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;
  }
}

https://jsfiddle.net/phk5rq7c/