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

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

Answer 2

我不确定这是否是最好的解决方案，但我认为它可以满足您的需求。

$(":radio").change(function() {
  // find column
  var tdColumn = $(this).closest("td");
  // find row
  var trRow = tdColumn.closest("tr");
  
  // uncheck all radios in current row, except the selected radio
  trRow.find(":radio").not($(this)).prop("checked",false);
  
  // index of current column
  var i = tdColumn.index();
  
  // uncheck all radios in current column, except the selected radio
  trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  
  <table>

Answer 3

我用 3 列和 5 行创建它但是它适用于 N 列 和 M 行...只需增加 td 和 tr标签...

试试这个...

你也可以现场测试here ;)

结果

.................................................. .................................................................... ......................................

jQuery：

$(document).ready(function(){
    var $table = $('#MyTable');
    var $rowCount = $table.find('tr').length;
    var $colCount = $($table.find('tr')[0]).find('td').length;
    console.log($rowCount);
    console.log($colCount);
    $table.find('tr').each(function(i, e){
        $tr=$(e);
        console.log($tr);
    });
});

$(".chBox").click(function() {
    console.log('clicked');
    $this=$(this);
    $row=$this.parent().parent();
    $table=$this.closest('table');


    $row.find('.chBox').each(function(i, e){
        $checkbox=$(e);
        $checkbox.prop('checked',false);
        console.log($checkbox);
    });

    $this.prop('checked',true);

    var col = $this.parent().parent().children().index($this.parent());
    var row = $this.parent().parent().parent().children().index($this.parent().parent());
    console.log(col);
    console.log(row);

    $table.find('tr').each(function(i, e){
        $tr=$(e);
        $tr.find('.chBox').each(function(k,ex){
            $chBox=$(this);
            if(k==col && i!=row)
                $chBox.prop('checked',false);
        });

    });
});

HTML：

<table id="MyTable">
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>

    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
</table>

Answer 4

使用 Angular 7 和 JavaScript 在同一行和同一列中仅选择一个复选框/单选按钮

这背后的想法是，使用单选按钮，我们有 name 属性，它可以按行或列进行单选，但同时针对行和列。每当单击按钮时，我都会将行放在名称中并使用 javascript 处理列。

这是 HTML 代码

<section class="editor">
 <strong>Editor</strong>
  <div>
   <label>Add option</label>
   <button (click)="addOption()">+</button>
  <div *ngFor="let option of options;let i = index">
  <span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)" 
    *ngIf="options.length>2">X</button>
  </div>
 </div>
</section>
<hr>
<section>
 <strong>Builder</strong>
  <div class="builder">
    <label>Question title goes here</label><br>
    <div *ngFor="let option of options;let row_index = index">
     <span>{{option.title +(row_index+1)}}</span>
     <span *ngFor="let rank of options;let column_index=index">
       <input type="radio" name="{{row_index}}" class="{{column_index}}" 
         (click)="check(column_index,$event)">
     </span>
   </div>   
  </div>
</section>

这是我用 Javascript 实现的 .ts 文件代码

export class AppComponent {
  options = [{
  title: "option",
  rank: 0,
}, {
 title: "option",
 rank: 0
}]
constructor() {

 }
  ngOnInit(): void { }
 addOption() {
  this.options.push({
  title: "option",
  rank: 0
  })
 }
deleteOption(i) {
  this.options.splice(i, 1);
}
check(column_index, event) {

Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}