Develop Reference

Dynamic table if checkbox is unchekd empty() the td cell with JS

I have dynamic table that in one td passes php vales of prices and on end of the table is sum of those prices. There is also a checkbox in every row default checked. I need to empty the content of row where checkbox is unchecked so it removes that price value out of sum calculation.
Question, will that even remove that value? I know setting the td field to hide does not.
Value cell:
<td style="width:10%" class="rowDataSd" id="value">
<?php echo
str_replace(array(".", ",",), array("", "."), $row['rad_iznos']);
?>
</td>
Checkbox cell:
<td style="width:3%">
<input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>">
</td>
I tried with this but nothing happens with no errors:
$(document).ready(function(){
if($("#remove").is(':checked')) {
$("#value").show();
} else {
$("#value").empty();
}
});
I can pass the unique values into each checkbox and value element into id's like:
id="<?php echo $row['rad_id']?>"
. So they tie each other but don't know how to say in JS to empty those elements.
I was also thinking something along the lines of, if on some row checkbox is unchecked empty closest td with id="value". My guess is that would be best solution but I don't know how to write it.
Or even if checkbox is unchecked remove css class .rowDataSd to closest td with id="vale" based on whom calculation is made.
Sum script:
var totals=[0,0,0];
$(document).ready(function(){
var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function() {
$(this).find('.rowDataSd').each(function(i){
totals[i]+=parseFloat( $(this).html());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>');
});
});
As seen on picture need to remove row out of calculation if checkbox is unchecked. Keep in mind I dont want to delete to row, just remove it our of calculation.
Any help with how to approach this is appreciated.

Here is a basic example.
$(function() {
function getPrice(row) {
var txt = $(".price", row).text().slice(1);
var p = parseFloat(txt);
return p;
}
function calcSum(t) {
var result = 0.00;
$("tbody tr", t).each(function(i, r) {
if ($("input", r).is(":checked")) {
result += getPrice(r);
}
});
return result;
}
function updateSum(tbl) {
var t = calcSum(tbl);
$("tfoot .total.price", tbl).html("$" + t.toFixed(2));
}
updateSum($("#price-list"));
$("#price-list input").change(function() {
updateSum($("#price-list"));
});
});
#price-list {
width: 240px;
}
#price-list thead th {
width: 33%;
border-bottom: 1px solid #ccc;
}
#price-list tfoot td {
border-top: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="item name">Item 1</td>
<td class="item price">$3.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 2</td>
<td class="item price">$4.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 3</td>
<td class="item price">$5.00</td>
<td><input type="checkbox" checked /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td class="total price">$0.00</td>
<td> </td>
</tr>
</tfoot>
</table>

It all boils down to setting up an event handler for the checkboxes. The event handler should perform the following:
Track the checkbox change event for all checkboxes and the DOM ready event
Calculate the total of all rows with checkbox checked
Set the total to the total element
It call also perform any desired changes on the unchecked row .. not done in sample code below
THE CODE
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();//trigger the change event on DOM ready
});
THE SNIPPET
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>1000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 2</td>
<td>1200</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 3</td>
<td>800</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 4</td>
<td>102000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
</tbody>
</table>
<span>TOTAL</span><span id="total"></span>

check all checkbox and add class

I made a table list and each row has checkbox.
And I trying to make if the checkbox is checked, add class on parent TR element.
But the problem is when check-all is checked, adding class on TR is not working.
This is what I tried here
Demo : https://jsfiddle.net/upXr8/24
$(document).ready(function() {
$("#checkAll").change(function(){
if(this.checked){
$(".checkbox").each(function(){
this.checked=true;
})
}else{
$(".checkbox").each(function(){
this.checked=false;
})
}
});
$(".checkbox").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkbox").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkAll").prop("checked", true); }
}else {
$("#checkAll").prop("checked", false);
}
});
$(".tbl tbody").on('click', 'input:checkbox', function() {
$(this).closest('tr').toggleClass('selected', this.checked);
});
$('.tbl input:checkbox:checked').closest('tr').addClass('selected');
});
thead tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
<col class="wid1">
</colgroup>
<thead>
<tr>
<td><input type="checkbox" name="" id="checkAll">all</td>
<td>head</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox"></td>
<td>cell</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox" checked></td>
<td>cell</td>
</tr>
</tbody>
</table>
How do I fix the code?
Also How do I fix the jquery more simpler ?
Please help.

Just add $(this).parent().parent().addClass('selected') in your loop when 'all' is checked, and $(this).parent().parent().removeClass('selected') when it's unchecked, as so:
$("#checkAll").change(function(){
if(this.checked){
$(".checkbox").each(function(){
this.checked=true;
$(this).parent().parent().addClass('selected')
})
}else{
$(".checkbox").each(function(){
this.checked=false;
$(this).parent().parent().removeClass('selected')
})
}
});
See here for updated fiddle

It might be helpfull for you
$(document).ready(
function() {
//clicking the parent checkbox should check or uncheck all child checkboxes
$("#checkAll").click(
function() {
$(this).closest('table').find('.checkbox').prop('checked', this.checked).closest('tr').toggleClass('selected', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.checkbox').click(
function() {
if ($(this).closest('table').find('#checkAll').prop('checked') && this.checked == false){
$(this).closest('table').find('#checkAll').attr('checked', false);
}
$(this).closest('tr').toggleClass('selected', this.checked);
var flag = true;
$(this).closest('table').find('.checkbox').each(
function() {
if (this.checked == false){
flag = false;
return;
}
}
);
$(this).closest('table').find('#checkAll').prop('checked', flag);
$(this).closest('table').find('.checkbox').toggleClass('selected', flag);
}
);
}
);
thead tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
<col class="wid1">
</colgroup>
<thead>
<tr>
<td><input type="checkbox" name="" id="checkAll">all</td>
<td>head</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox"></td>
<td>cell</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox" checked></td>
<td>cell</td>
</tr>
</tbody>
</table>

"column select-all" using checkbox without affecting other column in a table php

I wanted to create a simple html select-all checkbox for my table form. So when we click on top of corresponding column list all the elements in the column are selected without checking other columns.
Here is what i tried..
<form name="checkn" id="frm1" class="form1" method="post">
<table class="table" cellspacing="10" border="1" style="width:100%;">
<thead>
<tr>
<th>Products List</th>
<th>
Product Available
<input type='checkbox' name='checkall' onclick='checkAll(frm1);'>
</th>
<th>
Description
<input type='checkbox' name='checkall' onclick='checkdAll(frm2);'>
</th>
</tr>
</thead>
<tbody>
<?php
//fetch data php code
?>
<tr> <td width="20%;"> <h3> <?=$products?> </h3> </td>
<td width="20%;"> <input id="frm1" type="checkbox" name="product1" value='<?=$fieldname?>' > Product Available </td>
<td width="20%;"> <input id="frm2" type="checkbox" name="product2"> Description </td>
</tr>
<button type="submit" name="submit" style="position:absolute; bottom:0;"> Submit </button>
<script type="text/javascript">
checked = false;
function checkAll (frm1)
{
var aa= document.getElementById('frm1'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
<script type="text/javascript">
checked = false;
function checkdAll (frm2)
{
var aa= document.getElementById('frm2'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
</tbody>
</table>
</form>
Please help me

I think you need to find all tr length then find td with input. after that, you can check all. Like this here is my code. I hope it helps you.
$('#IsSelectAll').on('change', function () {
if ($(this).is(':checked')) {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', true);
});
}
else {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', false);
});
}
});

Click table row to select checkbox and disable/enable button jquery

HTML:
<table class="vi_table">
<thead>
<tr>
<th><input type="checkbox" class="v_checkbox"/>Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
Css:
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
Jquery:
$(document).ready(function () {
$(document).on('click', '.vi_table tbody tr', function (e) {
var submit = $('#percentage_submit_button');
var checked= $(this).find('input[type="checkbox"]');
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
if($('.v_checkbox').is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
submit.prop('disabled', true);
}
});
$(document).on('click', 'input[type="checkbox"]', function () {
$(this).prop('checked', !$(this).is(':checked'));
$(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
});
});
So Far - Fiddle
I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.
clicking the Selectall checkbox needs to select all the rows and enable the button.
Still I have some issues on selecting and deselecting the checkbox.
I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?
Thanks

Made a few changes so the checkboxes align. See code comments for further info:
Fiddle in case Code Snippet doesn't work
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checkbox = $(this);
if ($(this).is('tr')) {
checkbox = $(this).find('input[type="checkbox"]');
}
submit.prop('disabled', true); // Disable submit button
checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
if (checkbox.hasClass('all')) { // If this is "all"
$('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked')); // Set all other to same as "all"
if (checkbox.is(':checked')) { // change colour of "all" tr
checkbox.closest('tr').addClass('diff_color');
} else {
checkbox.closest('tr').removeClass('diff_color');
}
}
var blnAllChecked = true; // Flag all of them as checked
$('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.prop('disabled', false); // enable submit if one is checked
} else {
$(this).closest('tr').removeClass('diff_color');
blnAllChecked = false; // If one is not checked, flag all as not checked
}
});
if (blnAllChecked) {
$('.v_checkbox.all').closest('tr').addClass('diff_color');
$('.v_checkbox.all').prop('checked', true);
} else {
$('.v_checkbox.all').closest('tr').removeClass('diff_color');
$('.v_checkbox.all').prop('checked', false);
}
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
<thead>
<tr class="pv">
<th>
<input type="checkbox" class="v_checkbox all" />Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

I added an id to the select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>
The select all input is checked first. Applying it's status to each input, then using the .each() to loop though each row and apply the row styles.
Demo here: JSfiddle
$(document).ready(function () {
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checked = $(this).find('input[type="checkbox"]');
var checkedAll = $('#v_checkbox_all');
var isAllChecked = false;
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
$(this).prop('checked', !$(this).is(':checked'));
var checkedCount = $('.v_checkbox:checked').not('#v_checkbox_all').length;
var totalCount = $('.v_checkbox').not('#v_checkbox_all').length;
if (checked.prop('id') === 'v_checkbox_all') {
isAllChecked = true;
} else {
if (checked.prop('id') === 'v_checkbox_all' || checkedCount === totalCount) {
checkedAll.prop('checked', true);
} else {
checkedAll.prop('checked', false);
}
}
if (isAllChecked) {
if (checkedAll.is(':checked')) {
$('.v_checkbox').each(function () {
$(this).prop('checked', true);
});
} else {
$('.v_checkbox').each(function () {
$(this).prop('checked', false);
});
}
}
$('.v_checkbox').each(function () {
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
}
});
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
$('#percentage_submit_button').prop('disabled', true);
});

For selecting ALL checkboxes use this code:
$('.v_checkbox').change(function(){
$('.v_checkbox').each(function(){
$(this).prop( "checked", true );
})
;
})

How do I select all check box when I click on Select button using jQuery

I have HTML page which have multiple check boxes and individually they can be checked. I have button select, so what I am suppose to do is. When I click on select all the check boxes should get selected, and deselected.
Html
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#selectAll').click(function(event) { //on click
if(this.checked) { // check select status
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
</script>
<table id="example" cellspacing="0" width="20%">
<thead>
<tr>
<th><button type="button" id="selectAll" class="myClass">Select</button></th>
<th>number</th>
<th>company</th>
<th> Type</th>
<th> Address</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>1</td>
<td>APPLE</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>2</td>
<td>DELL</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>3</td>
<td>Amazon</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>4</td>
<td>Microsoft</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
</tbody>
</body>
</html>
Output
In the image I have select button. what I want is when I click on select button all the check boxes should get selected

If you want to toggle the checkbox state, you can do like this
var chkd = true;
$('#selectAll').click(function(event) {
$(":checkbox").prop("checked", chkd);
chkd = !chkd;
});
Fiddle

#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
FIDDLE

An simple way is like below:
$(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
The Demo.

Check this jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
You can simply use it
For more info on jQuery visit w3schools-jquery

Change your jQuery code to
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
This will toggle between checked and unchecked of the checkboxes when you click the button.

inside the "click" function "this" is button and not a checkbox. and button property checked is underfined.
"$('.btn-chk').each" - is loop on each element with class ".btn-chk", in your HTML is buttons and not an checkboxes.
in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes

Try this-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});

You can do it like this also with ':checkbox' selector.
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});

This will definitely works.
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});