我在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>
我想显示未检查的无线电的数量
答案 0 :(得分:0)
使用.reduce
标识所有无线电名称,然后在每个名称上使用.filter
并:选中选择器以确定未经检查的无线电字段的数量:
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));
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
注意:此解决方案将获取已检查的框数,但不会按名称匹配。只要您知道应该如何检查盒子,它就不应该成为问题。浏览器只允许检查其中一个具有匹配名称的框。如果您需要更具体的内容,请告诉我。
这是一个单线解决方案。只需在表的范围内使用查询选择器。获取:checked
框,然后获取alert
长度。
function init() {
var table = document.getElementById('table');
var radioBoxes = table.querySelectorAll('input[type="radio"]:checked')
alert(radioBoxes.length)
}
&#13;
<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?">
&#13;