jQuery check the parent checkbox if the child checkbox is checked - javascript

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>

Related

get parent element in a table

I'm trying to get the parent element in a table. I have a checkbox and I want to check the checkbox parent element.
For example
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
In my getValue function, I would like to get the value 125.55. It will have multiples checkbox in the table inside a loop. Does anyone know how can I get this value? I can use JQuery or just JS.
Thanks
Try this snippet
function getValue(checkbox){
return checkbox.parentElement.parentElement.cells[0]
.getElementsByTagName("a")[0].innerHTML;
}
Here you go with the solution https://jsfiddle.net/21vdgoou/1/
getValue = function(e){
console.log($($(e).parent().prev().children()[0]).text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $195 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $155 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
</tbody>
</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 / CSS: Change the css of a cloned tr

I am trying to clone a hidden table row, paste it and make it visible. For some reason the tr stays hidden. I've tried different ways but in the end I can not find a solution.
This is my code:
$(document).ready(function() {
$('#addproduct').click(function(e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
$('#hiddenTemplate').after(item);
$('#hiddenTemplate').css("visibility", visible);
});
});
#hiddenTemplate {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>
Your code is missing quotes around visible:
$('#hiddenTemplate').css("visibility", "visible");
(and as said in the comments, use a class rather than an id)
There where 3 misstakes in your code
remove Attribute id
$('#hiddenTemplate').css("visibility", "visible");
see 2 and do it on $(item)
$( document ).ready(function()
{
$('#addproduct').click(function (e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
item.removeAttribute('id');
$('#hiddenTemplate').after(item);
$(item).css("visibility", "visible");
});
});
#hiddenTemplate
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>

How to get Div id while click the div

<div id=ControlId>
<span>Select Option</span>
</div>
</div>
<div id=ControlId + "_child" style="display: none" >
<table>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3</td>
</tr>
</table>
</div>
i have added above more than one time in td's like following image
how to achieve id for main div in click event , actually my issue was if i click first div , finally added only opened
$("#" + ControlId).click(function () {
$("#" + ControlId + "_child").fadeIn("slow");
$("#" + ControlId + "_child").toggle();
});
this is my actual event code
try this
html
<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
javascript
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle]:not([toggle="' + selectdiv.attr('id') + '"])').hide();
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
Why not
$("#" + ControlId).click(function () {
$("#" + this.id + "_child").fadeIn("slow");
$("#" + this.id + "_child").toggle();
});
instead of id give class for div
<div id="ControlId" class="ControlId">
<span>Select Option</span>
</div>
</div>
$(function()
{
$(".ControlId").click(function()
{
var div=$(this);
//hide or toggle child divs
});
});

How to close div while open another div

<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
i have done it open the div above event . how to set in that event to close the opened div . also need to close div while click out of div or any action apart from div
if i opened one div need to close another one how to done it ?
actual output
I think you can hide all elements with the attribute toggle except the one that has to be opened.
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
var el = $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
$('[toggle]').not(el).hide()
})
})
Demo: Fiddle

Categories