javascript - 在同一行和同一列中只选择一个复选框/单选按钮

Question

我有六列和六个复选框(或单选按钮)。 我的意图是，在同一行和同一列中只能选择一个复选框。 例如: 当我选中 column4 和 row3' 中的复选框时，必须立即取消选中 row3 和 column4 中的每个复选框。

我用单选按钮试过，但我就是做不到，因为每个单选按钮总是在两个不同的组中。

编辑: 我的 HTML 代码:

<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
 <input type="checkbox" ID="column1row1">column1row1<br>
 <input type="checkbox" ID="column1row2">column1row2<br>
 <input type="checkbox" ID="column1row3">column1row3<br>
 <input type="checkbox" ID="column1row4">column1row4<br>
 <input type="checkbox" ID="column1row5">column1row5<br>
 <input type="checkbox" ID="column1row6">column1row6<br>
 </div>

 <div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column2row1">column2row1<br>
 <input type="checkbox" ID="column2row2">column2row2<br>
 <input type="checkbox" ID="column2row3">column2row3<br>
 <input type="checkbox" ID="column2row4">column2row4<br>
 <input type="checkbox" ID="column2row5">column2row5<br>
 <input type="checkbox" ID="column2row6">column2row6<br>
  </div>

 <div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column3row1">column3row1<br>
 <input type="checkbox" ID="column3row2">column3row2<br>
 <input type="checkbox" ID="column3row3">column3row3<br>
 <input type="checkbox" ID="column3row4">column3row4<br>
 <input type="checkbox" ID="column3row5">column3row5<br>
 <input type="checkbox" ID="column3row6">column3row6<br>
 </div>

 <div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column4row1">column4row1<br>
 <input type="checkbox" ID="column4row2">column4row2<br>
 <input type="checkbox" ID="column4row3">column4row3<br>
 <input type="checkbox" ID="column4row4">column4row4<br>
 <input type="checkbox" ID="column4row5">column4row5<br>
 <input type="checkbox" ID="column4row6">column4row6<br>
 </div>

 <div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column5row1">column5row1<br>
 <input type="checkbox" ID="column5row2">column5row2<br>
 <input type="checkbox" ID="column5row3">column5row3<br>
 <input type="checkbox" ID="column5row4">column5row4<br>
 <input type="checkbox" ID="column5row5">column5row5<br>
 <input type="checkbox" ID="column5row6">column5row6<br>
 </div>


 <div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column6row1">column6row1<br>
 <input type="checkbox" ID="column6row2">column6row2<br>
 <input type="checkbox" ID="column6row3">column6row3<br>
 <input type="checkbox" ID="column6row4">column6row4<br>
 <input type="checkbox" ID="column6row5">column6row5<br>
 <input type="checkbox" ID="column6row6">column6row6<br>
 </div>

Answer 1

这取决于标记。这是一个简单的例子:

html

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

jquery

$('input[type="checkbox"]').on('change', function() {

  // uncheck sibling checkboxes (checkboxes on the same row)
  $(this).siblings().prop('checked', false);

  // uncheck checkboxes in the same column
  $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

});

Here's a fiddle

Here's another example using classes