I have a select all checkbox that controls the checkboxes in table that is paginated in to subsequent pages. This works well except that it selects all records. For example, if a table has 200 records with a per page view of 20, I expect 10 pages in total. However, when the select all is checked, then it selects all 200 records and not just 20 of the current page. The expected result should be 20. I have researched broadly but not found an answer yet.
Here is a recreated problem
html
<table id='Table'>
<thead>
<tr>
<th>
<input type="checkbox" name="ticAll" id="ticAll"> </th>
<th>name</th>
<th>Age</th>
</tr>
</thead>
<tbody id='pagCont'>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Tom</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="2">
</td>
<td>Harry</td>
<td>24</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="3">
</td>
<td>Diva</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="4">
</td>
<td>Charlotte</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="5">
</td>
<td>Danny</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="6">
</td>
<td>Romeo</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="7">
</td>
<td>Gladys</td>
<td>21</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="8">
</td>
<td>Troy</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="9">
</td>
<td>John</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Fabio</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="10">
</td>
<td>Gracia</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="11">
</td>
<td>Tamuda</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="12">
</td>
<td>Elliot</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="13">
</td>
<td>John</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="14">
</td>
<td>Mohammad</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="15">
</td>
<td>Ellias</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="16">
</td>
<td>Charlie</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="17">
</td>
<td>Steve</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="18">
</td>
<td>Froom</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="19">
</td>
<td>Josh</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Meerkat</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="20">
</td>
<td>Toledo</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="21">
</td>
<td>Clay</td>
<td>23</td>
</tr>
</tbody>
</table>
<div id="page-nav"></div>
JavaScript
$("#ticAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
jQuery(function($) {
var items = $("#Table tr");
console.log(items);
var numItems ='21';
var perPage ='10' ;
// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();
// now setup pagination
$("#page-nav").pagination({
items: numItems,
itemsOnPage:perPage,
cssStyle: "dark-theme",
onPageClick: function(pageNumber) {
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide()
.slice(showFrom, showTo).show();
}
});
var checkFragment = function() {
// if there's no hash, make sure we go to page 1
var hash = window.location.hash || "#page-1";
hash = hash.match(/^#page-(\d+)$/);
if(hash)
$("#page-nav").pagination("selectPage", parseInt(hash[1]));
};
$(window).bind("popstate", checkFragment);
// and we'll also call it to check right now!
checkFragment();
});
Just replace you ticAll function with following code.
$("#ticAll").click(function () {
$('input:checkbox:visible').not(this).prop('checked', this.checked);
});
When you check All it will select only first page of check-boxes.
Related
I am currently working on a FooTable project where I am trying to create a 'select all' checkbox. I have run in to two issues and I cannot figure out how to proceed;
I can select all items, either ALL items (irrespective of filtering)
or just the items on the page.
I can get all the rows to show up, and select, but It will not filter.
I can apply a filter, and still selects all rows.
What I am looking for is a way to only select the filtered rows checkboxes, even if the rows are on different pages. I figured a cheaky way to accomplish this would be:
increase pageSize to more than the amount of filtered rows
select all checkboxes in shown rows
revert back to OG pageSize
<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Select All:<input type="checkbox" class="check-all"></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
</tbody>
</table>
jQuery(function($) {
$('.tg').footable();
function changePageSize(qs_table, num_rows_page) {
let newSize = num_rows_page;
FooTable.get(qs_table).pageSize(newSize);
}
function checkedAll(qs_table, qs_checkbox, num_column, checked) {
var ft = FooTable.get(qs_table)
ft.pageSize(11);
FooTable.init(qs_table);
let rows = ft.rows.all;
rows.forEach(function(row) {
row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
$(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
});
}
$(document).on("change", ".check-all", function() {
checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
});
});
Here is my JSFiddle: https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/
I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).
Function
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.
Thanks in advance
UPDATE
Added HTML
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>
Add class first to first checkbox in <tr> and add class second to second checkbox in <tr>.
updateTotals only query checkbox which has class first to avoid second.
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>
I am looking for a way to change the font colors of the row and column contents of a table with the assigned checkbox at the top and on the left side of the table. so when a checkbox is clicked either a corresponding row or column contents change font color. I don't need multiple colors. I just need to change font color to an assigned color only. Multiple row checkbox and column checkboxes may be clicked together, this shouldn't cause a complication. Thank you for your help!
Here is a jsfiddle also: https://jsfiddle.net/u6xzfnq7/
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox" id="check1" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check2" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check3" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check4" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check5" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check6" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check7" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check8" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check10" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check11" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check12" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check13" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check14" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check15" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check16" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check17" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check18" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check19" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check20" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check21" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check22" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check23" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>
You can do something like:
//Add listener on checbox inside the table with class .tb
$('.tb input[type="checkbox"]').change(function() {
//Remove all selected
$('.tb td').removeClass('selected');
//Add class on rows
//Select all checked checkbox on the first column
//Select the parent td and select its siblings
//Add Class
$('.tb tr>td:first-child').find('input[type="checkbox"]:checked').each(function() {
$(this).parent().parent().addClass('selected').siblings().addClass('selected');
})
//Add class on columns
//Select all checkboxes on the first row.
//Loop and check if checked.
//If checked, add class on the column
$('.tb tr:first-child').find('input[type="checkbox"]').each(function(i) {
if ($(this).is(":checked"))
$('.tb tr>td:nth-child(' + (i + 2) + ')').addClass('selected');
})
})
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>
I will do it in the following way:
var color = "red";
$('input[type=checkbox]').click(function(){
var id = $(this).attr('id');
var isChecked = $(this).prop('checked');
var idNum = $(this).attr('id').replace('check','');
if(idNum > 7){
if(isChecked)
$(this).closest('td').siblings().css('color', color);
else
$(this).closest('td').siblings().css('color', '');
}
else if(idNum < 23){
$(this).closest('tr').siblings().each(function(i, tr){
if(isChecked)
$(this).find('td:eq("'+idNum+'")').css('color', color);
else
$(this).find('td:eq("'+idNum+'")').css('color', '');
});
}
})
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.nochange,
tr {
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox" id="check1" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check2" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check3" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check4" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check5" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check6" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check7" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check8" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check10" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check11" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check12" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check13" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check14" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check15" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check16" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check17" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check18" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check19" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check20" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check21" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check22" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check23" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>
I know you already accepted Eddie's answer, but here it is anyway.
Trying to enhance his answer, here is a snippet showing what I'll do.
Please take time to consider the methods used in the javascript, that's the only thing I've changed from Eddie's code. I've added comments to make it clearer.
Plus, I added something funny in the CSS!
// Listen to checkboxes change on table
$('.tb input[type="checkbox"]').change(function() {
// Remove the class on all trs and tds
$('.tb tr, .tb td').removeClass('selected');
// Add the class only to checked trs (rows)
// Note that there is no need to use the .find() method
// You can just move the whole selection string in the $() query
$('.tb tr>td:first-child input[type="checkbox"]:checked').each(function() {
// closest() is a really nice method, consider it! Way clearer than .parent().parent()…
$(this).closest('tr').addClass('selected');
})
// Add the class only to checked tds (columns)
var tds = $('.tb tr:first-child td');
$('.tb tr:first-child input[type="checkbox"]:checked').closest('td').each(function() {
// The each only contains selected tds, not all of them
// Get index for each of the selecteds (+1 because index starts at 0) and style them!
$('.tb tr>td:nth-child(' + (tds.index($(this)) + 1) + ')').addClass('selected');
})
})
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.selected {
color: red;
}
/* The funny thing is that we could stylize intersections */
.selected .selected {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>
More about .closest(): https://api.jquery.com/closest/
More about .index(): https://api.jquery.com/index/
I hope it helps.
I am not sure if this was what you were after.
Here is a fiddle.
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input data-col="0" type="checkbox" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input data-col="1" type="checkbox" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" data-row="0" /> Switch</label>
</td>
<td data-row="0" data-col="0">Text</td>
<td data-row="0" data-col="1">Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" data-row="1" /> Switch</label>
</td>
<td data-row="1" data-col="0">Text</td>
<td data-row="1" data-col="1">Text</td>
</tr>
</tbody>
</table>
<style type="text/css">
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.nochange,
tr {
background-color: white;
}
td.row-checked.col-checked{
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
var $inputCheckboxRow = $('input[type="checkbox"][data-row]');
var $inputCheckboxCol = $('input[type="checkbox"][data-col]');
$inputCheckboxRow.on('change', onInputCheckBoxRowChange );
$inputCheckboxCol.on('change', onInputCheckboxColChange );
function onInputCheckBoxRowChange(){
let row = $(this).data('row');
if($(this).is(':checked')){
$('td[data-row='+ row +']').addClass('row-checked')
}else{
$('td[data-row='+ row +']').removeClass('row-checked')
}
}
function onInputCheckboxColChange(){
let col = $(this).data('col');
if($(this).is(':checked')){
$('td[data-col='+ col +']').addClass('col-checked')
}else{
$('td[data-col='+ col +']').removeClass('col-checked')
}
}
</script>
Good day,
I have once in a long dark past found some code to check or uncheck all paired checkboxes.
Now I have accidentally used the code twice. And I noticed that all of the checkboxes carrying the same name get selected. Hence a matter of duplicate ID's or names.
Now I want to alter this. But as soon as I am making just a small change to the existing code the script stops working.
And I have no idea at what line the script gets "corrupted".
This is the HTML code
<table class="panel_checkboxes" style="top: -20px;">
<tr>
<th>Select ALL</th>
<th>
<input id="selectall" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td>Location 4</td>
<td>
<input id="checkbox-panel-4" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 6</td>
<td>
<input id="checkbox-panel-6" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 5</td>
<td>
<input id="checkbox-panel-5" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 7</td>
<td>
<input id="checkbox-panel-7" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 3</td>
<td>
<input id="checkbox-panel-3" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 2</td>
<td>
<input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
</table>
The JQUERY code :
//<![CDATA[
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedpanelsId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedpanelsId").length == $(".selectedpanelsId:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".selectedpanelsId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
//]]>
Now what I want is to change the ID selectall to selectallLocations
And change the class : selectedpanelsId to SelectedLocationsID
Note I have created a fiddle so you can see what I mean:
JS Fiddle
HTML:
<table class="panel_checkboxes" style="top: -20px;">
<tr>
<th>Select ALL</th>
<th>
<input id="selectallLocations" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td>Location 4</td>
<td>
<input id="checkbox-panel-4" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 6</td>
<td>
<input id="checkbox-panel-6" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 5</td>
<td>
<input id="checkbox-panel-5" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 7</td>
<td>
<input id="checkbox-panel-7" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 3</td>
<td>
<input id="checkbox-panel-3" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 2</td>
<td>
<input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
</table>
Script:
$(document).ready(function () {
$('#selectallLocations').click(function () {
$('.SelectedLocationsID').prop('checked', isChecked('selectallLocations'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".SelectedLocationsID").length == $(".SelectedLocationsID:checked").length) {
$("#selectallLocations").attr("checked", "checked");
} else {
$("#selectallLocations").removeAttr("checked");
}
if ($(".SelectedLocationsID:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
Check updated DEMO
I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together
You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons
First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.