如何添加事件偵聽器以檢查頁面上選中的復選框數量并顯示警報？-有解無憂

所以我有一個網頁，其中包含 20 個復選框的串列。如果用戶勾選其中的任何 5 個，我想發出警報，說明他們已做出最大數量的選擇。

讓checked=document.getElementsByClassName("chkbox"); //類名添加到html中的每個復選框

check.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")
        }

})

uj5u.com熱心網友回復：

您應該查看復選框的“禁用”屬性，而不是提醒用戶，這樣他就無法選中任何其他復選框。你仍然需要在你的 JS 中有一個檢查計數器來知道什么時候激活你輸入的禁用屬性。

uj5u.com熱心網友回復：

您可以通過在用戶點擊復選框時檢查勾選框的數量來實作。

您可以閱讀代碼中的注釋以更好地理解它

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/370066.html

標籤：javascript html 添加事件监听器

上一篇：無法驗證簽名ECDSA密鑰

下一篇：隱藏塊而不是洗掉