Блог

У меня есть модальный, который я использую для задания coding boot camp —

У меня в списке указаны 7 дней недели, а также параметры выходных / будних дней.

Я подумал, что мог бы использовать Jquery .each и CSS:проверено, чтобы извлекать значения, которые я присвоил каждому из этих входных данных, но, похоже, я делаю что-то не так, так как каждый раз, когда я пытаюсь записать в консоль массив, в который я нажимаю, — он возвращает пустой массив.

Это мой первый пост о StackOverflow, и я новичок в программировании, пожалуйста, будьте осторожны 🙂

Заранее приношу извинения за синтаксис и форматирование. Как я уже сказал, я супер новичок и занимаюсь кодированием всего около 1,5 месяцев.

Я попытался присвоить всем флажкам разные идентификаторы и извлекать значения одно за другим в массив, я также попытался присвоить им одно и то же имя, чтобы я мог использовать функцию CSS checked, чтобы извлекать их все сразу, используя .each и this . Ни то, ни другое, похоже, не сработало

 //below is the check box portion of the modal//

<div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
        <label for="Monday">Monday</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
        <label for="Tuesday">Tuesday</label>
      </div>
      <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
            <label for="Wednesday">Wednesday</label>
    </div>
    <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
            <label  for="Thursday">Thursday</label>
    </div>
    <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
            <label  for="Friday">Friday</label>
    </div>
    <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
            <label  for="Saturday">Saturday</label>
    </div>
    <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
            <label for="Sunday">Sunday</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
      <label for="Weekday">Weekday</label>
    </div>
    <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
    <label  for="Weekend">Weekend</label>
    </div>


// here is where I try to call the values of which boxes are checked back//

$("#submitButton").on("click", function () {
    event.preventDefault();
            var  daysOfWeek1 = [];
                  $.each($("input[name='dayOfWeek']:checked"), function(){
                    daysOfWeek1.push($(this).val());
                  });

      console.log(daysOfWeek1)

    });
 

Я хотел бы получить обратно массив, содержащий значения (набор строк), которые я ввел для каждого параметра флажка, и иметь возможность сохранять его в переменной и консоли.также запишите его.

Сейчас я получаю только пустой массив

Это еще проще — просто используйте map , а затем преобразуйте его в массив (чтобы удалить лишние свойства), используя синтаксис spread:

 $("#submitButton").on("click", function() {
  event.preventDefault();
  var daysOfWeek1 = [...$("input[name='daysOfWeek']:checked").map((i, el) => $(el).val())];
  console.log(daysOfWeek1)
}); 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
  <label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
  <label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
  <label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
  <label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
  <label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
  <label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
  <label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
  <label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
  <label for="Weekend">Weekend</label>
  <button id="submitButton">Submit</button>
</div> 

упс. Это полностью работает — я просто использовал DayOfWeek ниже и DaysOfWeek выше…

.>

Извините, что беспокою вас