Develop Reference

How to calculate each table row indipendently on keyup

<tbody id="dailysale_tbody">
<tr class="items">
<td><select id="items_select" name="dailysale[luitem_id]"><option value=""></option></select></td>
<td><select id="brands_select" name="dailysale[lubrand_id]"><option value=""></option></select></td>
<td><select id="models_select" name="dailysale[lumodel_id]"><option value=""></option></select></td>
<td><input class="texts" id="dailysale_qty" name="dailysale[qty]" type="text" /></td>
<td><input class="texts" id="dailysale_price" name="dailysale[price]" type="text" /></td>
<td><input class="texts" id="dailysale_total" name="dailysale[total]" type="text" /></td>
<td><input type="checkbox" class="delete_row"></td>
</tr>
$(function() {
$('#dailysale_qty, #dailysale_price').keyup(function() {
var last_item = $('.items').find('#dailysale_qty');
var qty = last_row.find('#dailysale_qty').val();
var price = last_row.find('#dailysale_price').val();
var sub_total = last_row.find('#dailysale_total');
var s_total = qty * price;
if (isNaN(s_total)) {
sub_total.val('0');
}
else
sub_total.val(s_total);
});
});
I am able to perform calculations on this row. However, when I dynamically add rows with jquery, calculations are not working on the other rows.
When the calculating function is bind a button onclick, everything works well. But not on input keyup as required. I want to perform calculations on the new added row with onkeyup on qty and price input fields.
Note than upon cloning, the ids are stripped of the current row and assigned to the new row for reference.

You probably not registering keyup function when you adding new row.
You should do :
$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup( function(...
Every time you adding new row.

#Nosyara The suggested line of code isn't working. Here is how am adding new rows. The commented line is what you suggested.
$(function(){
$('#newitembtn').click(function(){
//$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function() {
var last_row = $('#dailysale_tbody').find('tr:last');
var newrow = last_row.clone();
last_row.find('#items_select').removeAttr('id');
last_row.find('#brands_select').removeAttr('id');
last_row.find('#models_select').removeAttr('id');
last_row.find('#dailysale_qty').removeAttr('id');
last_row.find('#dailysale_price').removeAttr('id');
last_row.find('#dailysale_total').removeAttr('id');
newrow.find('#items_select').val('');
newrow.find('#brands_select').val('');
newrow.find('#models_select').val('');
newrow.find('#dailysale_qty').val('');
newrow.find('#dailysale_price').val('');
newrow.find('#dailysale_total').val('');
last_row.after(newrow);
});
});
});

Select/Deselect checkbox does not work after selectAll checkbox clicked

I have a jquery datatable. One of its column consists of checkboxes as you can see here . Now, when I click the checkboxes on the rows they work fine. I mean it prints out one of the single select class checkbox is checked or one of the single select class checkbox is unchecked, since I added these on the event handler. However, if I click select all once, my individual checkboxes does not run anymore (it does not print out these messages).Select all checkboxes look like work fine. (selects all individual boxes). Here is my select all and single select checkbox related code :
SelectAll handler :
$('input[type="checkbox"][id="selectAll"]').click(function () {
if ($(this).prop("checked") == true) {
converter.checkAll(true);
} else if ($(this).prop("checked") == false) {
converter.checkAll(false);
}
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').attr('checked', (checktoggle) ? 'checked' : false);
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').click(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});

Use this mode
SelectAll handler :
// note change event
$('input[type="checkbox"][id="selectAll"]').change(function () {
converter.checkAll($(this).prop("checked"));
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').prop('checked', checktoggle) ;
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').change(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});

The issue appear to be
$('input[type="checkbox"][id="selectAll"]').click(function () {
is called on input with selector [id="selectAll"] ; js at post does not uncheck all checkboxes , but creates new input elements where checked attribute is set with argument checktoggle
so what should I do in order to fix this issue ?
Difficult to confirm without html included at Question . Try utilizing .each() , setting this.checked to true , false within callback
$('input[type="checkbox"][id="selectAll"]').click(function (e) {
$("input[type=checkbox]").each(function() {
if ($(e.target).prop("checked") == true) {
this.checked = true;
converter.checkAll(true);
} else {
this.checked = false;
converter.checkAll(false);
}
})
});

We can make check/uncheck jQuery datatable by using checkbox names of child rows.
<script type="text/javascript">
$(function () {
$("#chkAll").click(function () {
$("input[name='employees']").attr("checked", this.checked);
});
$('#example').DataTable({
});
});
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th align="left"><input type="checkbox" id="chkAll" /></th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
it works fine for more details http://www.infinetsoft.com/Post/How-to-check-all-rows-in-jQuery-datatables-grid/1255

JQuery To check all checkboxes in td based on classname of tr

here is my sample code
<table id="accessListTable">
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
</tr>
</table>
E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.
Please any help!

You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead
$(function ($) {
$(".groupHeadCheck").on("click", function (event) {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
})
});
Demo: Fiddle

I am sure it can be done in a prettier manner, but this is the basic idea:
$("table tbody").on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
allCbs.prop('checked', isChecked);
} else {
var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
var allSlaves = allCbs.not(".groupHeadCheck");
var master = allCbs.filter(".groupHeadCheck");
var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
master.prop("checked", allChecked);
}
});
and if you need to run the code to force the check all state
$(".groupHead").next().find("[type=checkbox]").change();
JSFiddle

This would check all if the first is checked (or uncheck all)
$(document).on('click', '.groupHeadCheck',function() {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});
you could fiddle a bit with your classes (or IDs) to make it right for you

I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.
You could use the class name to apply the same logic.
First, here is what a check all checkbox looked like:
<td>
<input type="checkbox" onchange="checkAll(this, 'S_');" />
</td>
Then the javascript function it calls when clicked:
function checkAll(sender, match)
{
var table = $(sender).closest('table').get(0);
var selector = "input[type='checkbox'][name^='" + match + "']";
for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
{
var cb = $(table.rows[i]).find(selector).get(0);
if (cb === undefined)
break;
if ($(cb).is(':enabled'))
cb.checked = sender.checked;
}
}
So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.

How to select value of all the tbody inputs values using jQuery

so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
How would you grab all the id numbers from the tbody rows from the Select all checkbox?
jQuery
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
HTML
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>

You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});

Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/

You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
jsFiddle

Use find instead of children and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/

I know this doesn't quite answer the question using children, but you can use $('#tbody').find('input') to find all the input fields within an element.

JQuery, calculating 2 prices, show total

I would like to calculate the total price according to 2 selected radio buttons. Here is what I have:
Radio buttons
html input class is fare
<td class='v2'><input type='radio' name='fare' value='STANDARD' id='rbt2'>625,06</td>
<td class='v2'><input type='radio' name='fare2' value='STANDARD' id='rbt9'>884,34</td>
$(document).ready(function(){
$("#rbt, #rbt2, #rbt3, #rbt4, #rbt5, #rbt6, #rbt7").click(function(){
$("#fare").html($(this).closest("td").text());
});
});
$(document).ready(function(){
$("#rbt8, #rbt9, #rbt10, #rbt11, #rbt12, #rbt13, #rbt14").click(function(){
$("#fare2").html($(this).closest("td").text());
});
});
Jquery calculator
$(document).ready(function(){
//iterate through each radio and add keyup
//handler to trigger sum event
$(".fare").each(function() {
$(this).keyup(function(){
calculateTotal();
});
});
});
function calculateTotal() {
var total = 0;
//iterate through each radio and add the values
$(".fare").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!==0) {
total += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#total").html(total.toFixed(2));
}
html output
<tr>
<td class="sc2" id="fare"></td>
<td>+</td>
<td class="sc2" id="fare2"></td>
<td>=</td>
<td><span class="total">0</span></td>
</tr>
The total is not being shown. Help greatly appreciated. Thanks!

Here ya go:
$(document).ready(function(){
...
$(".fare").keyup(function(){
calculateTotal(); <--- you don't need to use each() here.
});
});
function calculateTotal() {
...
$("#total").html(total.toFixed(2));
}
html output
<tr>
...
<td><span id="total">0</span></td> <---- change 'class' to 'id'
</tr>
Note the changes.