We Keep Coding

jQuery check the parent checkbox if the child checkbox is checked

I want to make a logic that if a child checkbox is checked, it checks the parent checkbox too. The input can parent, child and both:
<input type="checkbox" name="checkbox[$counter]" class="parent" />
<input type="checkbox" name="checkbox[$counter]" class="child" />
<input type="checkbox" name="checkbox[$counter]" class="parent child" />
This structure:
1
2
3
4
5
6
7
will be look like this:
<table class="table">
<tr>
<td>
<input type="checkbox" name="checkbox[1]" class="parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[2]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[3]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[4]" class="parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[5]" class="child parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[6]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[7]" class="child" />
</td>
<td>
.
.
</tr>
</table>
I want if I check 3, it checks 1 and if I check 6 it checks 5 and 4, too.
Also the checkboxes are in separate table rows, becouse I want to show some information structured in table next to the checkbox.
Can you show me a script what does it? I tried this, but it's not working:
$(document).ready(function() {
$('input.child').change(function() {
if ($(this).is(':checked')) {
$(this).closest('input.parent:checkbox').attr('checked', true);
}
});
});

The checkboxes are not parent-child relationship, thus the method .closest() will not work as it traverse's up starting from itself.
I would recommend you to assign classes with TR element and also attach event handler with them, traversing DOM will be easy.
<tr class="parent">...</tr>
<tr class="child">...</tr>
You could use combination of .prevAll() and .first() to get the targeted TR, then use .find() to get the checkbox.
Additionally, If you want to fire the change event trigger() method can be used.
$(document).ready(function() {
$('.child').on('change', ':checkbox', function() {
if ($(this).is(':checked')) {
var currentRow = $(this).closest('tr');
var targetedRow = currentRow.prevAll('.parent').first();
var targetedCheckbox = targetedRow.find(':checkbox');
targetedCheckbox.prop('checked', true).trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr class="parent">
<td>
<input type="checkbox" name="checkbox[1]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[2]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[3]" />
</td>
</tr>
<tr class="parent">
<td>
<input type="checkbox" name="checkbox[4]" />
</td>
</tr>
<tr class="child parent">
<td>
<input type="checkbox" name="checkbox[5]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[6]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[7]" />
</td>
</tr>
</table>

Try below script,
$(document).on('change', 'input[type=checkbox]', function(e) {
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
$(this).parentsUntil('input[type=checkbox]').children("input[type='checkbox']").prop('checked', this.checked);
e.stopPropagation();
});

With your current html structure you need make a link between childs and parents, for example with data attribute, now it works with any html structure, table, ul li or without these.
$(document).ready(function() {
$('input.child').on('change', function() {
var data = $(this).data('name');
if (this.checked) {
$('input.parent:checkbox[data-name="' + data + '"]').prop('checked', true);
$('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', true);
} else {
$('input.parent:checkbox[data-name="' + data + '"]').prop('checked', false);
$('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', false);
}
});
});
/* Optional, This is what I added for better look */
$('.child').each(function() {
$(this).parent().css({
paddingLeft: 20,
backgroundColor: '#c0c0c0'
});
});
$('.parent').each(function() {
$(this).parent().css({
backgroundColor: 'black'
});
});
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>
<input type="checkbox" name="checkbox[1]" class="parent" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[2]" class="child" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[3]" class="child" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[4]" class="parent" data-name="chck-2" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[5]" class="child parent" data-name="chck-2" data-parent="chck-3" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[6]" class="child" data-name="chck-3" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[7]" class="child" data-name="chck-3" />
</td>
<td>
</tr>
</table>

Bulk selecting of checkboxes per table using javascript & PHP

I'm trying to make a bulk action function.
What I want:
- Bulk selection in multiple tables, but one <form>
- At every table one select box to select all items inside that table
Example of my code
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function checkAll(table, bx) {
var checkname = document.table.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
checkname[i].checked = bx.checked;
}
}
</script>
Now I got the php part worked, so when I select multiple select boxes, the $_POST returns my values.
Also the Javascript part worked for me, so select all checkboxes per table.
But Javascript and PHP together won't work for me..
How can I fix this to let the JS and PHP work together?
I've tried multiple scripts but none of them worked for me.
The error I get from JS:
Uncaught TypeError: Cannot read property 'getElementsByName' of undefined
What I try, nothing works..

Try the below code
function checkAll(table, bx) {
var checkname = document.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
console.log(checkname[i]);
console.log(bx);
checkname[i].checked = bx.checked;
}
}
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
'this' the parameter you are passing in checkAll() is passed as a string.

JQuery Two 'Select All' Checkboxes Across 2 Tables

I have two tables that are filled with a number of checkboxes (the number is variable based on a retrieval profile defined on a previous screen). I've implemented a Select All check box at the top of each table with the following:
$('#select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
But this function selects all checkboxes in both tables (as it is poorly written to do). Is there an easy method of having the code select all checkboxes in each distinct tables.
Thanks.

You need to make your css more selective. It may not be necessary to use ids and an entirely different click function for each. You can probably just have a single click function bound to both and use the right selector, but hard to know without seeing your html.
If you post your html it will make it easier to help you, but you need something like the following:
$('#select_all1').bind('click', function() {
var checkedState = this.checked;
$('#table1 :checkbox').each(function() {
this.checked = checkedState;
});
});
$('#select_all2').bind('click', function() {
var checkedState = this.checked;
$('#table2 :checkbox').each(function() {
this.checked = checkedState;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all1"></input>
<table id="table1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<input type="checkbox" id="select_all2"></input>
<table id="table2">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>

It is advisable you use class attribute for your table since Id's are supposed to be unique.
Create a variable to store value for table closest to checkbox current checkbox triggered and Concatenate the variable with Selector.
$('.selectAll').bind('click', function() {
var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
var checkedState = this.checked;//variable for checkbox checked.
$(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
this.checked = checkedState;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
<tr>
<th> <input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="1"></td>
<td>Hello</td>
</tr>
<tr>
<td><input type="checkbox" id="2"></td>
<td>Hi</td>
</tr>
</table>
<table class="checkTable">
<tr>
<th><input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="3"></td>
<td>One</td>
</tr>
<tr>
<td><input type="checkbox" id="4"></td>
<td>Two</td>
</tr>
</table>

Use different id for different table or use class for table instead of id like so:
$('.select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});

Un/Check checkbox in table found by name (table value)

I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o

First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>

Radio box enabling input fields with JQuery

I'm trying to enable a textfield based on which option is chosen in a radio button. I'm just really new to any javascript or jquery, so I really need some help.
This is the TR from a table where the radio buttons and input fields are placed
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
<script type="text/javascript">
$('#no').click(function () {
$('#test').removeAttr("disabled");
});
$('#yes').click(function () {
$('#test').attr("disabled", "disabled");
});
</script>
</td>
</tr>
The problem is probably really trivial, but again, I haven't worked with this at all. Any help would be appreciated!

You can do it like like following using change event instead of click.
$(':radio[name=choose]').change(function () {
var isChecked = $('#yes').is(':checked');
$('#test').prop("disabled", !isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>

Wrap your code in document ready function
<script type="text/javascript">
$(function(){
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
})
</script>
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes" checked> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" > No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>