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

Question

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 tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.

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

Answer 1

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

});

Here's a fiddle

Here's another example using classes

Answer 2

I'm not sure if this is the best possible solution, but I think it does what you want.

 $(":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

I created it by 3 columns and 5 rows BUT it works for N cols and M rows ... just increase td and tr tags...

Try this...

Also you can test it live here ;)

Result

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

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

Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript

The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.

This is HTML CODE

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

And this is my .ts file code where I Implemented with Javascript

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