动态验证所有无线电输入是否被选中

Question

我在 table 中有很多输入。我想在每次进入页面时验证是否所有 radioOpciones* 都选中了一个选项。如果是真的，我会show()一些东西。

<table>
  <tr>
    <th>
      title
    </th>
    <td class="radioGroup">
      <input id="radioOpciones1" value="1" name="radioOpciones1" checked="checked" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones2" value="2" name="radioOpciones1" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones3" value="3" name="radioOpciones1" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones4" value="4" name="radioOpciones1" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones5" value="5" name="radioOpciones1" type="radio">
    </td>
  </tr>
  <tr>
    <th>
      title2
    </th>
    <td class="radioGroup">
      <input id="radioOpciones6" value="1" name="radioOpciones2" checked="checked" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones7" value="2" name="radioOpciones2" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones8" value="3" name="radioOpciones2" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones9" value="4" name="radioOpciones2" type="radio">
    </td>
    <td class="radioGroup">
      <input id="radioOpciones10" value="5" name="radioOpciones2" type="radio">
    </td>
  </tr>
</table>

我试图通过

获得长度

$('.radioGroup').length

然后与选中的选项进行比较

$('.radioGroup:has(input:checked)').length

我希望当我点击每个收音机时，如果它是最后一个选中的收音机选项，则可以发送一个继续按钮。

Answer 1

首先，由于 HTML 规则，您需要在同一页面中为您的输入提供不同的 ID。因为 id 为元素指定了一个唯一的 id。 Here

您的优雅解决方案就在这里：

if($('input.classname').not(':checked').length > 0) {
  ...
}

或

 if($('input[name="inputname"]').not(':checked').length > 0) {
  ...
}

Answer 2

已更新

搜索不同的无线电输入名称，将它们传递给 checkRadioGroups() 函数并获得结果。

每次要检查无线电输入的 checked 状态时都可以使用此功能。

注意

您可以在任何可能的 HTML 结构中使用此方法。

function checkRadioGroups(collection) {
  var obj = {};
  for (var i in collection) {
    var nameAttr = collection[i];
    var isChecked = $('input[name="' + nameAttr + '"]:checked').length > 0;
    obj[nameAttr] = isChecked;
  }
  return obj;
}

function getDistinctGroupNames() {
    var names = [];
    $('input[type="radio"]').each(function(index, elem) {
        var name = $(elem).attr('name');
        if (names.indexOf(name) === -1) {
            names.push(name);
        }
    });
    return names;
}

var check = checkRadioGroups(getDistinctGroupNames());
console.log(check);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <th>
          title
        </th>
        <td class="radioGroup">
          <input id="radioOpciones1" value="1" name="radioOpciones1" checked="checked" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones1" value="2" name="radioOpciones1" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones1" value="3" name="radioOpciones1" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones1" value="4" name="radioOpciones1" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones1" value="5" name="radioOpciones1" type="radio">
        </td>
      </tr>
      <tr>
        <th>
          title2
        </th>
        <td class="radioGroup">
          <input id="radioOpciones2" value="1" name="radioOpciones2" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones2" value="2" name="radioOpciones2" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones2" value="3" name="radioOpciones2" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones2" value="4" name="radioOpciones2" type="radio">
        </td>
        <td class="radioGroup">
          <input id="radioOpciones2" value="5" name="radioOpciones2" type="radio">
        </td>
      </tr>
    </table>

Answer 3

试试这个代码

$(function() {

    var radios = $('input[type=radio][name*=radioOpciones]').filter(function() {
        return $(this).is(':checked')
    });
    alert(radios.length);

});

希望这对您有所帮助

Answer 4

这就是我使用 <radio-group> 网络组件解决此问题的方式。该元素表示缺少的 radio-group 元素，您可以简单地询问该元素的值。 null表示单选按钮的none是:checked。否则，radio-group 元素报告 :checked 单选按钮的值：

class RadioGroup extends HTMLElement {
  constructor(...args) {
    const self = super(...args)
    self.type = 'radio-group'
    self.radioButtons = null
    return self
  }

  get value() {
    const checked = this.querySelector(':checked')
    return checked ? checked.value : null
  }

  set value(val) {
    const radios = this.radioButtons.filter(i => i.value === val)
    if (radios.length) {
      radios[0].checked = true
    } else {
      for (const radioButton of this.radioButtons) {
        radioButton.checked = false
      }
    }

    let change = createNewEvent('change', true, true)
    this.dispatchEvent(change)
  }

  connectedCallback() {
    if (this.nextSibling) { // children parsed?
      this.radioButtons = [...this.querySelectorAll('input[type=radio]')]
    } else { // if not, populate radioButtons only on next animation frame
      window.requestAnimationFrame(() => {
        this.radioButtons = [...this.querySelectorAll('input[type=radio]')]
      })
    }
  }
}

window.customElements.define('radio-group', RadioGroup)

let radioGroups = Array.from(document.querySelectorAll('radio-group'))

check.addEventListener('click', (e) => {
  console.log(radioGroups.every(radioGroup => radioGroup.value))
})

<radio-group id="sex">
  <fieldset>
    <legend>Sex</legend>
    <input type="radio" value="female" id="female" name="sex" />
    <label for="female">female</label>
    <input type="radio" value="male" id="male" name="sex" />
    <label for="male">male</label>
    <input type="radio" value="diverse" id="diverse" name="sex" />
    <label for="diverse">diverse</label>
  </fieldset>
</radio-group>
<radio-group id="color">
  <fieldset>
    <legend>Color</legend>
    <input type="radio" value="blue" id="blue" name="color" />
    <label for="blue">blue</label>
    <input type="radio" value="red" id="red" name="color" />
    <label for="red">red</label>
    <input type="radio" value="green" id="green" name="color" />
    <label for="green">green</label>
  </fieldset>
</radio-group>
<button id="check" type="button">Check if each radiogroup has a checked radiobutton</button>

动态验证所有无线电输入是否被选中

Dynamically validate all radio inputs are checked

javascript

jquery

input

radio-group