如何用未選中的按鈕數量發出警報？

Question

我在HTML表單中有n個單選按鈕。 如果未全部選中，則會出現一個對話框。 如何用未選中的按鈕數量發出警報？

            <tr>
                <td><strong>a</strong></td>
                <td><input type="radio" id="RadioButton" name="a"/></td>
                <td><input type="radio" id="RadioButton" name="a"/></td>
            </tr>

            <tr>
                <td><strong>acronym</strong></td>
                <td><input type="radio" id="RadioButton" name="acronym"/></td>
                <td><input type="radio" id="RadioButton" name="acronym"/></td>
            </tr>

            <tr>
                <td><strong>blockquote</strong></td>
                <td><input type="radio" id="RadioButton" name="blockquote"/></td>
                <td><input type="radio" id="RadioButton" name="blockquote"/></td>
            </tr>

            <tr>
                <td><strong>br</strong></td>
                <td><input type="radio" id="RadioButton" name="br"/></td>
                <td><input type="radio" id="RadioButton"name="br"/></td>
            </tr>

            <tr>
                <td><strong>div</strong></td>
                <td><input type="radio" id="RadioButton" name="div"/></td>
                <td><input type="radio" id="RadioButton" name="div"/></td>
            </tr>

我想顯示未檢查的收音機數量

Answer 1

使用.reduce來標識所有無線電名稱，然后在每個名稱上使用.filter並使用：checked選擇器找出未選中的無線電字段的數量：

 const allRadioNames = [...document.querySelectorAll('input[type="radio"]')] .reduce((names, { name }) => { if (!names.includes(name)) names.push(name); return names; }, []); document.querySelector('button').addEventListener('click', () => { const checkedCount = allRadioNames.filter(name => { return document.querySelector(`input[type="radio"][name="${name}"]:checked`); }).length; console.log('uncheckedCount: ' + (allRadioNames.length - checkedCount)); }); 

 <tr> <td><strong>a</strong></td> <td><input type="radio" id="RadioButton" name="a" /></td> <td><input type="radio" id="RadioButton" name="a" /></td> </tr> <tr> <td><strong>acronym</strong></td> <td><input type="radio" id="RadioButton" name="acronym" /></td> <td><input type="radio" id="RadioButton" name="acronym" /></td> </tr> <tr> <td><strong>blockquote</strong></td> <td><input type="radio" id="RadioButton" name="blockquote" /></td> <td><input type="radio" id="RadioButton" name="blockquote" /></td> </tr> <tr> <td><strong>br</strong></td> <td><input type="radio" id="RadioButton" name="br" /></td> <td><input type="radio" id="RadioButton" name="br" /></td> </tr> <tr> <td><strong>div</strong></td> <td><input type="radio" id="RadioButton" name="div" /></td> <td><input type="radio" id="RadioButton" name="div" /></td> </tr> <br> <button>submit</button> 

Answer 2

注意：此解決方案將獲取選中的盒子數量，但名稱不匹配。 只要您知道應該如何檢查復選框，就不成問題。 瀏覽器僅允許選中名稱匹配的框之一。 讓我知道您是否需要更具體的信息。

這是單行解決方案。 只需在表范圍內全部使用查詢選擇器即可。 提取:checked框，然后alert長度。

 function init() { var table = document.getElementById('table'); var radioBoxes = table.querySelectorAll('input[type="radio"]:checked') alert(radioBoxes.length) } 

 <table id="table"> <tr> <td><strong>a</strong></td> <td><input type="radio" id="RadioButton" name="a" /></td> <td><input type="radio" id="RadioButton" name="a" /></td> </tr> <tr> <td><strong>acronym</strong></td> <td><input type="radio" id="RadioButton" name="acronym" /></td> <td><input type="radio" id="RadioButton" name="acronym" /></td> </tr> <tr> <td><strong>blockquote</strong></td> <td><input type="radio" id="RadioButton" name="blockquote" /></td> <td><input type="radio" id="RadioButton" name="blockquote" /></td> </tr> <tr> <td><strong>br</strong></td> <td><input type="radio" id="RadioButton" name="br" /></td> <td><input type="radio" id="RadioButton" name="br" /></td> </tr> <tr> <td><strong>div</strong></td> <td><input type="radio" id="RadioButton" name="div" /></td> <td><input type="radio" id="RadioButton" name="div" /></td> </tr> </table> <input type="button" onclick="init()" id="button" value="How many are checked?">