第二次验证单选按钮集

Validating sets of radio buttons a second time?

本文关键字：单选按钮 验证 第二次      更新时间：2023-09-26

我正在制作一个表单，询问用户有关锦标赛的信息。我需要限制每个位置只有一个团队，反之亦然。后者我已经想通了。但是我在想进一步验证单选按钮的方法时遇到了麻烦。该集合在4x4网格中，每个列和行应该只有一个值。我可以通过将按钮命名为相同来获得团队验证，但我找不到验证位置的方法。我有一种方法来验证复选框，但我需要使用单选按钮，这样我就可以知道用户放置每个复选框的顺序，这样我就可以读取每个组中排名第一和第二的团队。

团队、位置和按钮的布局方式是在一个表格中。

<form>
<table class="groupSeating" cellspacing="2">
<caption>Group Seating</caption>
  <colgroup>
    <col class="groups" />
    <col class="teams" />
    <col class="seating" span="4" />
  </colgroup>
  <tr>
    <th rowspan="2" colspan="2"></th>
    <th colspan="4">Seating</th>
  </tr>
  <tr>
    <td>1st</td>
    <td>2nd</td>
    <td>3rd</td>
    <td>4th</td>
  </tr>
  <tr>
    <td rowspan="4">Group A</td>
    <td>ROX Tigers</td>
    <td>
      <input type="radio" name="roxSeed" id="ROX1" value="ROX" />
    </td>
    <td>
      <input type="radio" name="roxSeed" id="ROX2" value="ROX" />
    </td>
    <td>
      <input type="radio" name="roxSeed" id="ROX3" value="ROX" />
    </td>
    <td>
      <input type="radio" name="roxSeed" id="ROX4" value="ROX" />
    </td>
  </tr>
  <tr>
    <td>G2 Esports</td>
    <td>
      <input type="radio" name="g2Seed" id="G21" value="G2" />
    </td>
    <td>
      <input type="radio" name="g2Seed" id="G22" value="G2" />
    </td>
    <td>
      <input type="radio" name="g2Seed" id="G23" value="G2" />
    </td>
    <td>
      <input type="radio" name="g2Seed" id="G24" value="G2" />
    </td>
  </tr>
  <tr>
    <td>Counter Logic Gaming</td>
    <td>
      <input type="radio" name="clgSeed" id="CLG1" value="CLG" />
    </td>
    <td>
      <input type="radio" name="clgSeed" id="CLG2" value="CLG" />
    </td>
    <td>
      <input type="radio" name="clgSeed" id="CLG3" value="CLG" />
    </td>
    <td>
      <input type="radio" name="clgSeed" id="CLG4" value="CLG" />
    </td>
  </tr>
  <tr>
    <td>Albux Nox Luna</td>
    <td>
      <input type="radio" name="anxSeed" id="ANX1" value="ANX" />
    </td>
    <td>
      <input type="radio" name="anxSeed" id="ANX2" value="ANX" />
    </td>
    <td>
      <input type="radio" name="anxSeed" id="ANX3" value="ANX" />
    </td>
    <td>
      <input type="radio" name="anxSeed" id="ANX4" value="ANX" />
    </td>
  </tr>
</table>
</form>

我的代码可能有一个更干净的方式，但我不担心，这是一个学校的项目。我试着从另一个js中获取一些复选框，但我想不出要改变什么。

var limit = 2;
$('input.singleCheckbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});

这是你要找的吗?

https://jsfiddle.net/277uu501/2/

var reject = false;
$('input[type="radio"]')
  .mouseup(function(){
    var selectedValues = [];
    $('input[type="radio"]:checked').each(function(){
      selectedValues.push($(this).parent().index());
    });
    var selectedValue = $(this).parent().index();
    reject = selectedValues.indexOf(selectedValue) != -1;
  })
  .change(function(){
    if(reject) this.checked = false;
  });

看来我明白了。试试下面的JS代码:

$('input').on('change', function() {
  var initiator = $(this);
  var value = initiator.val();
  var counter = 0;
  $('input:checked').each(function(i, elem) {
    if (elem.value === value) {
      counter++;
    }
  });
  if (counter > 1) {
    initiator.prop('checked', false);
  }
});

它不允许在行/列上检查多个单选按钮

相关文章：