如何添加事件侦听器以检查页面上选中的复选框数量并显示警报？

Question

所以我有一个 web 页面，其中包含 20 个复选框的列表。 如果用户勾选其中任何 5 个，我想发出警告，说明他们已做出最大数量的选择。

让检查=document.getElementsByClassName("chkbox"); //类名添加到html中的每个复选框

checked.addEventListener('change', () => {

  let counter=0;
    for(let i=0;i<checked.length;i++){ //to update counter each time a checkbox gets changed
        if(checked[i].checked){
        counter++;
        }
    }
    if(counter==5){
            alert("You have made maximum choices. Proceed to next form")
        }

})

Answer 1

您可以通过在用户单击框时检查选中框的数量来做到这一点。

您可以阅读代码中的注释以更好地理解它

 // Defind how many check boxes a user can check // You requested 5 but to make it less html code, I put 2 in the variable below var checkboxLimit = 2; // Get every check box by using querySelectorAll document.querySelectorAll("input[type=checkbox]").forEach( // For each check box add on click event listener input => input.addEventListener('click', function(event) { // get number of check boxes by passing:check attribute to the query selector var numberTickedBoxes = document.querySelectorAll("input[type=checkbox]:checked").length; // check if the number of ticked boxes are more than allowed limit if(checkboxLimit < numberTickedBoxes){ alert("You are allowed to check " + checkboxLimit + " boxes") } }) );

 <label>1</label> <input type="checkbox" name="test" value="1" /> <br/> <label>2</label> <input type="checkbox" name="test" value="2" /> <br/> <label>3</label> <input type="checkbox" name="test" value="3" /> <br/>

与上面相同，但在用户检查了有限的数量之后，不再使用event.preventDefault(); 在 if 语句中

 var checkboxLimit = 2; document.querySelectorAll("input[type=checkbox]").forEach( input => input.addEventListener('click', function(event) { var numberTickedBoxes = document.querySelectorAll("input[type=checkbox]:checked").length; if(checkboxLimit < numberTickedBoxes){ alert("You are allowed to check " + checkboxLimit + " boxes"); event.preventDefault(); } }) );

 <label>1</label> <input type="checkbox" name="test" value="1" /> <br/> <label>2</label> <input type="checkbox" name="test" value="2" /> <br/> <label>3</label> <input type="checkbox" name="test" value="3" /> <br/>

Answer 2

您应该查看复选框的“禁用”属性，而不是提醒用户，这样他就无法选中任何其他框。 您仍然必须在 JS 中有一个检查计数器才能知道何时激活输入的禁用属性。

Answer 3

首先，您获取复选框。 然后您可以遍历 HTMLCollection。 在循环内，您检查是否设置了检查的属性。 如果是，则将计数器加一。

 const fs = document.getElementsByTagName('fieldset') var cb = document.querySelectorAll("input[name=favorite_pet]"); const limit = 2; let counter = 0; for (let i = 0; i < cb.length; i++) { cb[i].addEventListener('change', function() { if (this.checked) { console.log("Checkbox is checked.."); counter++; } else { counter--; console.log("Checkbox is not checked.."); } if (counter >= 2) { alert('warning') } console.log(counter) }); }

 <fieldset> <legend>What is Your Favorite Pet?</legend> <input type="checkbox" name="favorite_pet" value="Cats" >Cats<br> <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br> <input type="checkbox" name="favorite_pet" value="Birds" >Birds<br> <br> <input type="submit" value="Submit now" /> </fieldset>