Check and uncheck the checkbox by row - php

Question

Good Day all...I'm having a multiple row which is fetched from my DB by foreach loop.
And I have 2 checkboxes in each row, What I'm trying is... If I check the 1st checkbox mean automatically the 2nd checkbox need to check.
For that I'm using ID to select that 2nd checkbox, Now because of that id is same for every row, if I select
1st row ,1st checkbox mean it's selecting all the second check box. But what I need is to get that particular selected row's 2nd checkbox need to be checked.
Anyone Help. Sorry for not sharing any live demo like jsfiddle. I hope u guys understand my problem.
<thead>
<th><input type="checkbox" id="select_all"></th>
</thead>
<?php foreach ($category_details as $key => $category_detail): ?>
<tr>
<td>
<input type="checkbox" class="checkbox" id="select_img" name="ids[]" value="<?php echo $category_detail['id'];?>"/>
<input type="checkbox" class="checkbox checkimg" name="imgs[]" value="<?php echo $category_detail['category_image'];?>"/>
</td>
<td>...</td> <!-- etc -->
</tr>
<?php endforeach ?>
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('#select_img').on('click',function(){
if(this.checked){
$('.checkimg').each(function(){
this.checked = true;
});
}else{
$('.checkimg').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});

Answer 1

You can use siblings jquery function. For example:
$('.whole_row').on('click',function(){
if(this.checked){
$(this).siblings().each(function(index, checkbox){
checkbox.checked = true;
});
}else{
$(this).siblings().each(function(index, checkbox){
checkbox.checked = false;
});
}
});
this way it will iterate the siblings tags and won't go outer the table rows. Just use classes not ids
Edit:
just a style note
$('.whole_row').on('click',function(){
let check = this.checked;
$(this).siblings().each(function(index, checkbox){
checkbox.checked = check;
});
});
html like this:
<tr>
<input type="checkbox" class="whole_row">one
<input type="checkbox">two
<input type="checkbox">three
<input type="checkbox">four
</tr>