如何檢查九個複選框中只有三個時顯示警報？

Question

我已經在我的網站上實現了下面的代碼，當三個複選框命名爲「正確」時被檢查。

<input type="checkbox" name="correct"/> 
<input type="checkbox" name="correct"/> 
<input type="checkbox" name="correct"/> 

const correctInputs = [...document.querySelectorAll('input[name="correct"]')]; 

const alertIfThree =() => { 
    const checkedCorrectInputs = correctInputs.filter(input => input.checked); 
    if (checkedCorrectInputs.length > 2) { 
    alert('Alert'); 
    } 
}; 

correctInputs.forEach(input => input.addEventListener('click', alertIfThree)); 

不過，我也有6個複選框命名爲「不正確」和這些複選框進行檢查時，我不希望要生產的警惕，即使三個「正確」複選框被選中。

<input type="checkbox" name="incorrect"/> 
<input type="checkbox" name="incorrect"/> 
<input type="checkbox" name="incorrect"/> 
<input type="checkbox" name="incorrect"/> 
<input type="checkbox" name="incorrect"/> 
<input type="checkbox" name="incorrect"/> 

如何更改我的代碼以實現此目的？ 在此先感謝！

Answer 1

你需要檢查都input.checked和input.getAttribute（「名稱」）在您的箭頭函數正確的價值

Answer 2

你可以保持同樣的邏輯

const correctInputs = [...document.querySelectorAll('input[name="correct"]')]; 
const incorrectInputs = [...document.querySelectorAll('input[name="incorrect"]')]; 

const alertIfThree =() => { 
    const checkedCorrectInputs = correctInputs.filter(input => input.checked); 
    const checkedIncorrectInputs = incorrectInputs.filter(input => input.checked); 

    if (incorrectInputs.length === 0 && checkedCorrectInputs.length > 2) { 
     alert('Alert'); 
    } 
}; 

Answer 3

最好的辦法，我認爲將查詢不正確的複選框，並在您的if語句中添加額外條件。

const IncorrectInputs = 
[...document.querySelectorAll('input[name="incorrect"]')]; //check the incorrect values as well.. 

const alertIfThree =() => { 
    const checkedCorrectInputs = correctInputs.filter(input => 
    input.checked); 

    const checkedIncorrectInputs = IncorrectInputs.filter(input => 
    input.checked); 

    if (checkedCorrectInputs.length > 2 && checkedIncorrectInputs<=0) { 
    alert('Alert'); 
    } 
};