在同一行和列中只选择一个复选框/单选按钮 [英] Select only one checkbox/radiobutton in the same row and column

问题描述

我有六列有六个复选框（或收音机）。
我的意图是，在同一行和同一列中只能选择一个复选框。
例如：
当我选择column4和row3'中的复选框时，row3和column4中的每个复选框必须立即取消选择。

I have six columns with six checkboxes (or radio). My intention is, that only one checkbox can be selected in the same row and the same column. For example: When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.

I尝试使用单选按钮，但我根本不能这样做，因为每个单选广播总是在两个不同的组。

I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.

编辑：
我的HTML代码：

My HTML Code:

<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>

推荐答案

以下是一个简单的示例：

It depends on the markup. Here's a simple example:

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

});

这篇关于在同一行和列中只选择一个复选框/单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！