我的 javascript 代码不会将元素推送到我的数组，我不知道为什么？

Question

所以我的代码背后的基本思想是这样的。

有 7 个复选框的选择和一个应该在单击时处理结果的按钮。

如果选中两个框，该函数应打印选择，如果选中的框数小于或大于 2，则应显示显示错误消息的警报。

为了跟踪复选框的数量，我运行了一个等于复选框数量的循环，并且每次array[index] == true ，给定复选框的值都应该添加到一个名为 selections 的数组中.

似乎我的代码未能将元素添加到数组选择中，我不明白为什么。

任何人都可以为我解释一下吗？

<fieldset>
  <legend>Side Dishes</legend>
  <h3>Pick two side dishes</h3>
  <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br />
  <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
  <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
  <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
  <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix 
  Vegetables<br />
  <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni 
  and Cheese<br />
  <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
  <input type ="button" value = "Enter my side dish selections" id="sideselect"/>
</fieldset>

document.querySelector("#sideselect").addEventListener("click", validateSelection);

function validateSelection() {
  //Creates a list of check boxes to count true or false.
  var checkedSides = document.getElementsByName("sides");
  //Array to hold selected check boxes.
  var selections = [];
  console.log(checkedSides);
  console.log(checkedSides[1].value);

  for (var j = 0; j < checkedSides.length; j++) {
    //Inserts selected items into selections.
    if (checkedSides[j].check === true) {
      selections.push(checkedSides[j].value);
    }
  }

  console.log(selections);

  //Prints the first and second selected side to output if exactly 2 sides are selected.
  if (selections.length === 2) {
    document.querySelector("#side_one").textContent = selections[0];
    document.querySelector("#side_two").textContent = selections[1];
    //Tells the user they have selected too few items and clears selections.
  } else if (selections.length < 2) {
    alert("Please select at least 2 sides.");
    selections = [];
    //Tells the user they have selected too many items and clears selections. 
  } else if (selections.length > 2) {
    alert("Order is limited to 2 sides. Please adjust your selection.");
    selections = [];
  }
}

Answer 1

试试这种方式，在单击调用函数上声明计数器和数组，以使用 for 循环检查所有元素。

如果选中 == true 则在数组中添加值或 id。

如果您有问题，请告诉我。

<fieldset>
        <legend>Side Dishes</legend>
        <h3>Pick two side dishes</h3>
        <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br />
        <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
        <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
        <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
        <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix 
        Vegetables<br />
        <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni 
        and Cheese<br />
        <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
        <input type ="button"  value = "Enter my side dish selections" id="sideselect"/>
        </fieldset>
        <script>
            
            let sel =[];
            let counter=0;
            selection=()=>{
                
                for (let i = 1; i < 8; i++) {
                    let a = document.getElementById(i);
                    
                    if(a.checked ===true){
                        sel[counter] = a.value;
                        counter++;
                    }
                    
                }
                if(counter<3){
                alert("You Selected 2 or less Items ");
                }else{
                    console.log(sel);
                    
                }
            }
            document.getElementById("sideselect").addEventListener("click", selection);
        </script>

Answer 2

您可以使用 css Pseudo-classe 选择器":checked"来仅获取选中的输入作为使用.querySelectorAll的节点列表，这里是一个示例：

 document.querySelector("#sideselect").onclick = function() { let checkedSides = document.querySelectorAll("[name='sides']:checked"); if(checkedSides.length > 2) { alert("Order is limited to 2 sides. Please adjust your selection."); }else if(checkedSides.length < 2) { alert("Please select at least 2 sides."); }else { // just for demonstration although there will be only two I like to use forEach :) checkedSides.forEach(checkedSide => console.log(checkedSide.value)); // submit or do whatever with the data } }

 <fieldset> <legend>Side Dishes</legend> <h3>Pick two side dishes</h3> <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br /> <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br /> <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br /> <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br /> <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix Vegetables<br /> <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br /> <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br /> <input type ="button" value = "Enter my side dish selections" id="sideselect"/> </fieldset>

Answer 3

最简单的方法......（？）

 const myForm = document.forms['my-form'] ; myForm.onsubmit = evt => { evt.preventDefault() // disable submit let selections = // get Selections [...myForm.sides].reduce((r,s)=> { if (s.checked) r.push(s.value) return r },[]) myForm.side_one.value = (selections.length===2) ? selections[0] : '' myForm.side_two.value = (selections.length===2) ? selections[1] : '' if (selections.length < 2) alert("Please select at least 2 sides.") if (selections.length > 2) alert("Order is limited to 2 sides. Please adjust your selection.") }

 <form name="my-form"> <fieldset> <legend>Side Dishes</legend> <h3>Pick two side dishes</h3> <label> <input type="checkbox" name="sides" value="French Fries" > French Fries </label><br> <label> <input type="checkbox" name="sides" value="Baked Potato" > Baked Potato </label><br> <label> <input type="checkbox" name="sides" value="Cole Slaw" > Cole Slaw </label><br> <label> <input type="checkbox" name="sides" value="Garden Salad" > Garden Salad </label><br> <label> <input type="checkbox" name="sides" value="Mixed Vegetables" > Mix Vegetables </label><br> <label> <input type="checkbox" name="sides" value="Macaroni and Cheese" > Macaroni and Cheese </label><br> <label> <input type="checkbox" name="sides" value="Applesauce" > Applesauce </label><br> </fieldset> <br> <button type="submit">Enter my side dish selections</button> <br> <br> <fieldset> <legend>choices</legend> -- <input type="text" name="side_one" readonly> <br> -- <input type="text" name="side_two" readonly> <br> </fieldset> </form>

Answer 4

对不起大家，这是一个非常简单的错字，我有 .check 我应该在哪里 .checked 我的代码打印为 [if (checkedSides[j].check === true)]。