Question

我正试图找到一种方法来验证我的所有单选按钮，以确保至少检查其中一个。问题是使用名称和id必须保持它们所处的格式。所以基本上我想要一种方法来分组我的所有单选按钮，即使是不同的名字和id。

我强调如何循环表中的所有选中按钮，但有些是在表格之外，代码只是我需要做的一个例子。

  <table id="table" width="100%" border="0" cellpadding="5">
  <tr>
      <td><input type="radio" name="blue" id="blue" value="blue1" /></td>
      <td><input type="radio" name="blue" id="blue" value="blue2" /></td>
      <td><input type="radio" name="red" id="red" value="red1" /></td>
      <td><input type="radio" name="red" id="red" value="red2" /></td>
      <td><input type="radio" name="blue" id="green" value="green1" /></td>
      <td><input type="radio" name="green" id="green" value="green2" /></td>
  </tr>
  </table>

Answer 1

这样的事情：

if($('input[type="radio"]:checked').length > 0){
   //at least one radio on your page is checked
}

Answer 2

假设你要进行HTML5验证，只需要其中一个验证，然后随时更改：

<input required type="radio" name="blue" id="blue" value="blue1" />

JS：

$radios = $('input[type="radio"]');
$radios.on('change', function() {
    if ($(this).is(':checked')) {
        $radios.prop('required', false);
        $(this).prop('required', true);
    }
});

$('form').on('submit', function(e) {
    if ($('input[type="radio"]:checked').length === 0) {
        e.preventDefault();
        alert("Must check at least one radio");
        return false;
    }
});

Answer 3

根据您发布的HTML，我建议将所有发布的name元素的<input />更改为colour（或color，根据语言偏好设置）显然将它们联系在一起。

但是，如果无法完成，并且您可以添加类名作为关联群组的方式：

var allInputs = $('input.colour'),
       checked = allInputs.filter(':checked'),
      choiceMade = checked.length > 0;

顺便提及：

...我想通过添加课程，如果我选了一个，它会检查该课程中的其余部分。

不，该行为 - 取消选中另一个元素应该另一个元素 - 完全取决于<input />共享name属性并进行语义分组。只要您不自己创建该功能，那么创建关联的方式并不重要。

Answer 4

要确保选中表格中至少有一个单选按钮，并且页面顶部有一个单选按钮：

if ($('#top-radio').is(':checked') && $('#table :radio:checked').length) {
    // valid, something is checked
}

将所有单选按钮分组，名称不同

4 个答案: