We Keep Coding

how to get the sum of all row value in jquery

I'm trying to achieve two additions in my code.
I am trying to get the sum of the row values in the last column of the row
I am trying to get the sum of all the final columns in another div
I've achieved the first, my code gives me the correct value of each row. However the second sum is not populating the addition. It's giving me the same value of each row, but I want the value of all rows.
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += sum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>

To fix this you need to create a loop which iterates through all the .netpay elements, not just the one which was updated, and generates the total value.
In addition, you need to perform the same action when the checkbox is changed. The logic itself can also be made more succinct and DRY, like this:
$('.bonus-sum').on('input', updateRowTotal);
$('.bonus-in').on('change', updateRowTotal).trigger('change'); // trigger is to set values on load
function updateRowTotal() {
let $tr = $(this).closest('tr');
let salary = parseFloat($tr.find('.wagein').text()) || 0;
let bonus = parseFloat($tr.find('.bonus-sum').val()) || 0
let rowTotal = salary + ($tr.find('.bonus-in:checked').length ? bonus : 0);
$tr.find('.netpay').text(rowTotal.toFixed(2));
updateTotal();
}
function updateTotal() {
let total = 0;
$('.netpay').each((i, el) => total += parseFloat(el.textContent.trim() || 0));
$('#total').text('₹ ' + total.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>
Note the removal of all the duplicate id attributes in your HTML . They are invalid, and are not required anyway.

I have introduced new variable totalsum.
Replace the below function .your code will work as expected
<script>
var totalsum=0;
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
totalsum+=sum;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += totalsum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
</script>

checkbox check and uncheck task

<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>
hi, i have ten checkbox on left column and ten input field box on right column , if i select any check box corresponding input field should filled with check box value(or index) and if u uncheck the check box same corresponding input value should be removed.. if u select first check box the value in the input field is one and if you select 10th check box value in the input field is 2. check count should be in order. pls help me in this

Use the parent() function to select the td and then using siblings() function get the sibling td and using children() function get the input box and using val() insert the value of the checkbox in the input field
$('input[type=checkbox]').change(function() {
$(this).parent('td').siblings('td').children('input').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>

var texts = document.querySelectorAll('.inpt');
var checkboxes = document.querySelectorAll('.chk');
checkboxes.forEach((checkbox, i) => checkbox.addEventListener('change', () => changeCheckbox.call(checkbox, i)));
function changeCheckbox(i) {
texts[i].value = this.checked ? this.value : '';
}
<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>
Edit: warning, I used arrow functions which are not supported in older browsers.

jQuery: Loop print only one value

I have below code
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
<script>
jQuery('table#main_table').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
alert(txt);
}
});
I need to check within table if checkbox is checked then print it's qty value. But below code only prints 1 value. Instead of all
What I'm missing?

Your loop is for tr not for table.
jQuery('table#main_table tr').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

You're using each on <table> which will iterate only once as there is only one table with that ID. Iterate over the <tr> elements in the table.
$('#main_table tr').each(function() {
...
jQuery('table#main_table tr').each(function() {
if (jQuery(this).find("input:checkbox").is(':checked')) {
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
There's better way to do this. Instead of iterating over tr and finding checked checkboxes, you can iterate over checked checkboxes and get the value of the associated textbox.
$(this) // Will refer to the checkbox
.closest('td') // Get parent <td>
.next() // Get next element i.e. next <td>
.find('[name="qty[]"]') // Find element with name attribute value as "qty[]"
.val() // Get it's value
$('#main_table tr :checkbox:checked').each(function() {
console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

PHP: Getting work days and closed days based on checkbox

So This is what i have done till now ,but i can't think of a way to get the data, entered or checked by user for each day in php . Since i have the same name for all the input type for workdays i.e. name='work' . I cant find a way to get the values for each day seperately( USING PHP).
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="suday" /></td>
</tr>
</table>
<br />
<br />
<b>Number Of Employees:</b><input type="number" max="20" min="1" name="noe" placeholder="1 - 20" /> <br /> <br />
<table>
<tr>
<td><b>Buisness Details:</b></td>
<td><input type="date" name="doe"
placeholder="Date Of Establishment" /></td>
</tr>
<tr>
<td></td>
<td><input type="number" name="a_tover" placeholder="ANNUAL TURNOVER" /></td>
</tr>
</table>
</form>
</center>
<script language="javascript">
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</body>

<html>
<head>
<script>
var workdays=[0,0,0,0,0,0,0];
var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var allcheckbox = document.getElementsByName('work');
function checkcheckbox(arr,checked){
for (var i = 0; i < checked.length; i++) {
if(checked[i].checked){
arr[i]=1;
}else{
arr[i]=0;
}
}
console.log(arr);
}
function print(arr,days){
for (var i = 0; i < arr.length; i++) {
if(arr[i]==0){
console.log(days[i]+": close");
}else{
console.log(days[i]+": workday");
}
}
}
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</head>
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
</table>
<br />
<input type="button" value="SEND" onclick="checkcheckbox(workdays,allcheckbox)"/>
<input type="button" value="SEND" onclick="print(workdays,days)"/>
</form>
</center>
</body>
</html>

Javascript table with multiple rows radio button function

I have some trouble to fix this code. I would like to know how can I implement the function to make all the rows working with a radio button.
I do not want to repeat the writing of the code line for each question. I would like something short and clear in DOM scriptiong no Jquery.
Only one option can be selected for one row.
here my js and html code
<!DOCTYPE html>
<html>
<body>
<script>
function checkRadio() {
var selectedAge="";
var len = document.row.selectedAge.length;
var i;
for (i = 0; i<len; i++) {
if (document.row.selectedAge[i].value;
break;
}
}
if (selectedAge == "") {
document.getElementByid("radio_error").innnerHTML = "no option selected";
return false
}
else {
document.getElementById("radio_error").innerHTML = "";
return true;
}
}
</script>
<table>
<tr>
<th scope="col"></th>
<th scope="col">noRisk</th>
<th scope="col">lowRisk</th>
<th scope="col">mediumRisk</th>
<th scope="col">HighRisk</th>
</tr>
<tr>
<th scope="row"><div class="lefttext">How old are you?</div></th>
<td><input type="radio" id="none" name="selectedAge" value="1-25">1-25</td>
<td><input type="radio" id="low" name="selectedAge" value="26-40">26-40</td>
<td><input type="radio" id="medium" name="selectedAge" value="41-60">41-60</td>
<td><input type="radio" id="high" name="selectedAge" value="60+">1-25</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">What is you BMI?</div></th>
<td><input type="radio" id="none" name="selectedBmi1" value="0-25">0-25</td>
<td><input type="radio" id="low" name="selectedBmi2" value="26-30">26-30</td>
<td><input type="radio" id="medium" name="selectedBmi3" value="31-35">31-35</td>
<td><input type="radio" id="high" name="selectedBmi4" value="35+">35+</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">Does anybody in your family have diabetes?</div></th>
<td><input type="radio" id="none" name="selectedDiabete1" value="no">No</td>
<td><input type="radio" id="low" name="selectedDiabete2" value="grandparent">Grandparent</td>
<td><input type="radio" id="medium" name="selectedDiabete3" value="sibling">Sibling</td>
<td><input type="radio" id="high" name="selectedDiabete4" value="parent">Parent</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">How would you describe your diabete</div></th>
<td><input type="radio" id="none" name="description1" value="low sugar">Low sugar</td>
<td><input type="radio" id="low" name="description2" value="normal sugar">Normal sugar</td>
<td><input type="radio" id="medium" name="description3" value="quite high sugar">Quite high sugar</td>
<td><input type="radio" id="high" name="description4" value="high sugar">High sugar</td>
</tr>
</table>
</body>
</html>

Your code has some javascript errors. I solved those errors.
here is your modified script:
<script>
function checkRadio() {
var selectedAge="";
var len = document.row.selectedAge.length;
var i;
function init(){
for (i = 0; i<len; i++) {
if (document.row.selectedAge[i].value);
break;
}
if (selectedAge == "") {
document.getElementByid("radio_error").innnerHTML = "no option selected";
return false
}
else {
document.getElementById("radio_error").innerHTML = "";
return true;
}
}
init();
}
</script>