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并：选中选择器以确定未经检查的无线电字段的数量：

＆＃13;

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;

Answer 2

注意：此解决方案将获取已检查的框数，但不会按名称匹配。只要您知道应该如何检查盒子，它就不应该成为问题。浏览器只允许检查其中一个具有匹配名称的框。如果您需要更具体的内容，请告诉我。

这是一个单线解决方案。只需在表的范围内使用查询选择器。获取:checked框，然后获取alert长度。

＆＃13;

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;

如何使用未检查的按钮数量发出警报？

2 个答案: