Question

我正在制作一张表格，询问用户有关比赛的信息。我需要将每个展示位置限制为只有一个团队，反之亦然。我已经弄明白了。但我很难想出进一步验证单选按钮的方法。该集合采用4x4网格，每列和每行只应有一个值。我可以通过命名按钮来让团队验证工作，但我找不到验证展示位置的方法。我有办法验证复选框，但我需要使用单选按钮，这样我就可以让每个复选框的用户放置哪些订单，这样我就可以阅读每组中第1和第2个团队的位置。

团队，展示位置和按钮的布局方式在表格中。

<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;
  }
});

Answer 1

看来我明白了。试试这个JS代码：

$data = json_decode(file_get_contents("php://input"));

$fName  = mysql_real_escape_string($data->fName);

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

Answer 2

这是你正在寻找的吗？

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;
  });

第二次验证单选按钮组？

2 个答案: