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>
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>
- 1 could you post your HTML code? – Berriel Commented Nov 12, 2014 at 12:52
- 2 Something like this? – billyonecan Commented Nov 12, 2014 at 12:57
- Post an answer @billyonecan, nicely done – urbz Commented Nov 12, 2014 at 13:08
4 Answers
Reset to default 1It 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
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./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>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>
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;
}
}