需要将多个复选框中的值拉入数组并将其存储为变量

时间:2019-04-16 00:07:17

标签: javascript jquery html css

我有一个模态用于编码训练营分配-

我列出了一周中的7天以及周末/工作日选项。

我以为我可以使用Jquery .each和CSS:check拉出我为这些输入分配的值,但是每次尝试记录正在推送的数组时,我似乎做错了到-它返回一个空数组。

这是我在StackOverflow上的第一篇文章,我对编码非常陌生,请保持柔和:)

预先为语法和格式道歉。就像我说的那样,我是超级新手,只编码了1.5个月。

我尝试为所有复选框赋予不同的ID,然后将值一个一个地拉入数组,还尝试给它们取相同的名称,以便可以使用CSS选中的功能使用.each一次将其全部拉入。似乎都不起作用

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

    });

我想找回一个数组,其中包含我为每个复选框选项输入的值(字符串集),并能够将其存储在变量中并进行控制台。

现在我只得到一个空数组

2 个答案:

答案 0 :(得分:0)

更简单-只需使用map,然后使用扩展语法将其转换为数组(以删除多余的属性)即可:

$("#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>

答案 1 :(得分:0)

哎呀。完全有效-我只是在下面使用dayOfWeek,在上面使用daysOfWeek ...

  

。>

很抱歉打扰您