I am using this JS code to check if any radiobutton per line checked.
<script type="text/javascript">
function validate_add_table_1()
{
// maatv
if (document.getElementsByName('maatv').checked = false) {
document.getElementById('maatv_glyp').className = ""; }
else {
document.getElementById('maatv_glyp').className = "glyphicon glyphicon-ok"; }
// lassen
if (document.getElementsByName('lassen').checked = false) {
document.getElementById('lassen_glyp').className = ""; }
else {
document.getElementById('lassen_glyp').className = "glyphicon glyphicon-ok"; }
}
</script>
For some reason, when I choose the top row, JS is also setting the OK sign for the second line.
Any suggestions?
<tr>
<td align="right"><?php echo $lang['maatv']; ?>:</td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="uitstekend"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="goed"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="voldoende"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="matig"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="slecht"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="maatv" value="nvt"></td>
<td align="center"><span id="maatv_glyp" class="" style="color:green"></span></td>
</tr>
<tr>
<td align="right"><?php echo $lang['lassen']; ?>:</td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="uitstekend"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="goed"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="voldoende"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="matig"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="slecht"></td>
<td align="center"><input onchange="validate_add_table_1()" type="radio" name="lassen" value="nvt"></td>
<td align="center"><span id="lassen_glyp" class="" style="color:green"></span></td>
</tr>
That is because your if-statements are wrong.
if (document.getElementsByName('lassen').checked == false) {
You need to compare it with ==
You are using = that's why it will always go into the else branch on both if statements.
You could just split the group of buttons into their own onChange functions. From your example, I split the two if-else statements into their own functions and cleaned up the code a bit with correct javascript usage on some of your elements. Instead of getting a NodeList of objects the previous way you have you code, I changed it to just use this to select the current object that is selected. I also used setAttribute to set the checkmark's class names.
JS:
<script>
function validate_add_table_1(temp)
{
// maatv
var maatvCheckMark = document.getElementById('maatv_glyp');
if (temp.checked === false) {
maatvCheckMark.setAttribute('class','') }
else {
maatvCheckMark.setAttribute('class','glyphicon glyphicon-ok'); }
}
function validate_add_table_2(temp2)
{
// lassen
var lassenCheckMark = document.getElementById('lassen_glyp');
if (temp2.checked === false) {
lassenCheckMark.setAttribute('class',''); }
else {
lassenCheckMark.setAttribute('class','glyphicon glyphicon-ok'); }
}
</script>
Html:
<tr>
<td align="right"><?php echo $lang['maatv']; ?>:</td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="uitstekend"></td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="goed"></td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="voldoende"></td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="matig"></td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="slecht"></td>
<td align="center"><input onchange="validate_add_table_1(this)" type="radio" name="maatv" value="nvt"></td>
<td align="center"><span id="maatv_glyp" class="" style="color:green"></span></td>
</tr>
<tr>
<td align="right"><?php echo $lang['lassen']; ?>:</td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="uitstekend"></td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="goed"></td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="voldoende"></td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="matig"></td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="slecht"></td>
<td align="center"><input onchange="validate_add_table_2(this)" type="radio" name="lassen" value="nvt"></td>
<td align="center"><span id="lassen_glyp" class="" style="color:green"></span></td>
</tr>
Hopefully this helps.
Here's a simple vanilla Javascript example:
document.querySelector('.radiogroups').addEventListener('change', (event) => {
const anyChecked = [...event.target.parentElement.querySelectorAll('input')]
.some(radio => radio.checked);
event.target.parentElement.querySelector('.result').textContent = anyChecked;
})
<div class="radiogroups">
<div class="radiogroup">
<input type="radio" name="row1" />
<input type="radio" name="row1" />
<input type="radio" name="row1" />
<input type="radio" name="row1" />
<input type="radio" name="row1" />
<input type="radio" name="row1" />
<span class="result">false</span>
</div>
<div class="radiogroup">
<input type="radio" name="row2" />
<input type="radio" name="row2" />
<input type="radio" name="row2" />
<input type="radio" name="row2" />
<input type="radio" name="row2" />
<input type="radio" name="row2" />
<span class="result">false</span>
</div>
</div>
Here's the same example with checkboxes:
document.querySelector('.checkboxgroups').addEventListener('change', (event) => {
const anyChecked = [...event.target.parentElement.querySelectorAll('input')]
.some(checkbox => checkbox.checked);
event.target.parentElement.querySelector('.result').textContent = anyChecked;
})
<div class="checkboxgroups">
<div>
<input type="checkbox" name="row1" />
<input type="checkbox" name="row1" />
<input type="checkbox" name="row1" />
<input type="checkbox" name="row1" />
<input type="checkbox" name="row1" />
<input type="checkbox" name="row1" />
<span class="result">false</span>
</div>
<div>
<input type="checkbox" name="row2" />
<input type="checkbox" name="row2" />
<input type="checkbox" name="row2" />
<input type="checkbox" name="row2" />
<input type="checkbox" name="row2" />
<input type="checkbox" name="row2" />
<span class="result">false</span>
</div>
</div>
var cono = document.getElementsByTagName('tr');
Array.from(cono).forEach(function(e){
var cono2 = e.getElementsByTagName('input');
Array.from(cono2).forEach(function(b){
b.addEventListener('change', function(){
if(b.checked == true){
b.parentNode.parentNode.classList.add("withicon")
}
})
})
});
.icon{
display:none
}
tr.withicon .icon{
display:unset
}
<table>
<tr>
<td align="center"><input type="radio" name="maatv" value="uitstekend"></td>
<td align="center"><input type="radio" name="maatv" value="goed"></td>
<td align="center"><input type="radio" name="maatv" value="voldoende"></td>
<td align="center"><input type="radio" name="maatv" value="matig"></td>
<td align="center"><input type="radio" name="maatv" value="slecht"></td>
<td align="center"><input type="radio" name="maatv" value="nvt"></td>
<td align="center"><span class="icon">ICON HERE</span></td>
</tr>
<tr>
<td align="center"><input type="radio" name="lassen" value="uitstekend"></td>
<td align="center"><input type="radio" name="lassen" value="goed"></td>
<td align="center"><input type="radio" name="lassen" value="matig"></td>
<td align="center"><input type="radio" name="lassen" value="slecht"></td>
<td align="center"><input type="radio" name="lassen" value="uitstekend"></td>
<td align="center"><input type="radio" name="lassen" value="nvt"></td>
<td align="center"><span class="icon">ICON HERE</span></td>
</tr>
</table>
Two things to point here:
Your if statement is missing the == check.
document.getElementsByName("someName") doesn't contain checked property instead it return NodeList object
The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name in the document.
So instead of checking like if(document.getElementsByName('maatv').checked == false) you might want to check on NodeList object, whether if any of it's element checked property is true or not.
Something like this:
function isRadioSelected(name){
let resultElem = Array.from(document.getElementsByName(name)).find((item) => item.checked);
// Just for display purpose
document.getElementById("result").innerHTML = resultElem ? resultElem.checked : false;
//return resultElem ? resultElem.checked : false; return the result from here
}
<input type="radio" name="colors" >Red<br>
<input type="radio" name="colors" >Blue<br>
<input type="radio" name="colors" >green<br>
<button onclick="isRadioSelected('colors')"> Check </button>
<label id="result"></label>
And use function isRadioSelected(name) in your if condition something like this:
if (!isRadioSelected('maatv')) {
document.getElementById('maatv_glyp').className = ""; }
else {
document.getElementById('maatv_glyp').className = "glyphicon glyphicon-ok"; }
I hope this helps.
Related
I have a table in which there is a radio group. There are 5 items and each item has 4 choices (the values for which are 0, 1, 2, 3). I need to not only calculate the total of all these, but also the number of Fails (value = 0). I have work js for both of these. How can I use these together? Any assistance would be greatly appreciated. Thank you.
Count Fails (value = 0):
function setRadios() {
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
onload = setRadios;
Total:
function setRadios() {
function sumRadios() {
var total = 0,
i = 1,
oForm = this.form;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = sumRadios;
}
onload = setRadios;
And finally here is the form (radio group) - set up to calculate the number of fails:
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
</div>
</form>
There are 2 ways to do it. The first one is to add multiple event handlers to one form. Simply:
document.querySelector('#myForm').addEventListener('submit', sendForm);
document.querySelector('#myForm').addEventListener('submit', clearForm);
The second one is to create an anonymous function and call these 2 functions inside it.
document.querySelector('#myForm').addEventListener('submit', function (event) {
sendForm(event);
clearForm(event);
});
You could easily put them together like i did here:
function setRadios() {
var i = 0,
k = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
sumRadios(oForm)
}
function sumRadios(oForm) {
var total = 0,
i = 1;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
onload = setRadios;
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
<div align="center">total: <input id="total" type="text" name="" value="" />
</div>
</div>
</form>
</form>
Yes, that is the goods. Thank you so much. I did get it in the end without looking at your code (yours is MUCH better and way more elegant). I would love to hear what you think of my solution (it may not run as snippet, but it does run on my localhost). It is so gratifying when someone understands exactly what you are after.
<?php
$currentPage = $_SERVER[ "PHP_SELF" ];
?>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Basic Report</title>
<script type="text/javascript">
function setRadios() {
function countTotals() {
var numFail = 0;
var total = 0;
oForm = this.form;
for ( var i = 1; i <= 5; i++ ) {
var radgrp = document.getElementsByName( 'Set' + i );
var radgrp1 = document.getElementsByName( 'Set' + i );
for ( var j = 0; j < 5; j++ ) {
var radio = radgrp[ j ];
if ( radio.value == "0" && radio.checked ) {
numFail++;
}
var radio1 = radgrp1[ j ];
if ( radio1.checked ) {
total += Number( radio.value );
}
}
}
oForm.elements.numFail.value = numFail;
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById( 'f1' ).getElementsByTagName( 'input' );
while ( input = inputs.item( i++ ) )
input.onclick = countTotals;
}
onload = setRadios;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="17%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="15%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Distinction</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Excellence</td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Task</td>
<td width="15%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="17%" align="center"><input id="task2" type="radio" name="Set1" value="1"/></td>
<td width="17%" align="center"><input id="task3" type="radio" name="Set1" value="2"/></td>
<td width="17%" align="center"><input id="task4" type="radio" name="Set1" value="3"/></td>
<td width="17%" align="center"><input id="task5" type="radio" name="Set1" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Cohesion</td>
<td width="15%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="17%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1"/></td>
<td width="17%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2"/></td>
<td width="17%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3"/></td>
<td width="17%" align="center"><input id="cohesion5" type="radio" name="Set2" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Lexis</td>
<td width="15%" align="center"><input id="lexis1" type="radio" name="Set3" value="0" required/></td>
<td width="17%" align="center"><input id="lexis2" type="radio" name="Set3" value="1"/></td>
<td width="17%" align="center"><input id="lexis3" type="radio" name="Set3" value="2"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="3"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Grammar</td>
<td width="15%" align="center"><input id="grammar1" type="radio" name="Set4" value="0" required/></td>
<td width="17%" align="center"><input id="grammar2" type="radio" name="Set4" value="1"/></td>
<td width="17%" align="center"><input id="grammar3" type="radio" name="Set4" value="2"/></td>
<td width="17%" align="center"><input id="grammar4" type="radio" name="Set4" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set4" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1"/></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set5" value="2"/></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set5" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set5" value="4"/></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">NumFail: <input id="numFail" type="text" name="numFail" value=""/>
<div align="center">Total: <input id="total" type="text" name="total" value=""/>
<input type="reset" class="button1"/>
</div>
</form>
I wanna add on two buttons which can function as selecting all the radio buttons according to the respective type. I want the buttons to select either all Yes radio buttons or all No buttons accordingly.
I would appreciate if anyone could help me to solve this. Prefers JavaScript instead of jQuery.
function Calc() {
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
var radios = document.getElementsByName("group" + (i + 1));
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
//Display the total value of test points
document.getElementById('total').value = tot;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes">Select All Yes</button>
<button type="button" name="selectNo">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>
You can use the following function:
function selectAll(value) {
var elements = document.querySelectorAll("input[value=" + value + "]");
elements.forEach(function(element, index) {
element.checked = true;
});
}
function Calc() {
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
var radios = document.getElementsByName("group" + (i + 1));
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
//Display the total value of test points
document.getElementById('total').value = tot;
}
function selectAll(value) {
var elements = document.querySelectorAll("input[value=" + value + "]");
elements.forEach(function(element, index) {
element.checked = true;
});
}
document.getElementById("selectYes").addEventListener("click", function() {
selectAll("Yes");
});
document.getElementById("selectNo").addEventListener("click", function() {
selectAll("No");
});
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes" id="selectYes">Select All Yes</button>
<button type="button" name="selectNo" id="selectNo">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>
On click of the buttons, you can call the below function which will toggle the selection of radio buttons Yes/No based on the parameters passed.
The code gets the HTML collection of all radio buttons having type='radio' and value='Yes' or value='No' using querySelectorAll, then convert the HTML element collection to array using slice. Then updates the checked property to true using Map method.
function selectAll(value){
var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']"))
.map(function (el) { el.checked = true; });
}
function selectAll(value){
var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']"))
.map(function (el) { el.checked = true; });
}
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes" onclick="selectAll('Yes')">Select All Yes</button>
<button type="button" name="selectNo" onclick="selectAll('No')">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>
You can add this to your javascript
var selectYesBtn = document.getElementsByName('selectYes')[0];
var selectNoBtn = document.getElementsByName('selectNo')[0];
function check_Uncheck( radioValueAttr, check ) {
var radios = document.querySelectorAll('input[type="radio"[value="'+ radioValueAttr +'"]');
for (x in radios) {
radios[x].checked = check;
}
}
selectYesBtn.onclick = function () {
check_Uncheck("No",false);
check_Uncheck("Yes",true);
};
selectNoBtn.onclick = function () {
check_Uncheck("No",true);
check_Uncheck("Yes",false);
};
The function "check_Uncheck" works for both radios (yes/no).. passing the input value attribute("Yes"/"No") as first argument, and a boolean whether to check them or uncheck them as second argument.
So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days
Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>
Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
I have 23 checkboxes. Each of them has a value. When the user checks the checkbox, its value will be added to the grandtotal and will show in a text box. If not checked, it will not be added. My problem is, it does not add. It only shows the value of the last checked checkbox. How can I add all the values that are checked?
this is the jquery for my checkboxes.
function tblcheckboxes(cb){
var a=0;
var total = 0;
if (cb.is(":checked")) {
a = parseFloat(cb.val(), 10);
total += a;
}else{
total -= a;
}$('.txt7').val(total.toFixed(2));
}
$(document).ready(function(){
$('[id^="tcbx"]').click(function(){
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});
You need to set the value of total as the value of the total element
function tblcheckboxes(cb) {
var total = 0;
$('input.amount').filter(':checked').each(function() {
total += (+this.value || 0);
});
$('.txt7').val(total.toFixed(2));
}
$(document).ready(function() {
$('input.amount').click(function() {
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});
function ChangeColColor() {}
function grandtotal() {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA" />
<col id="colB" />
<col id="colC" />
<col id="colD" />
<col id="colE" />
</colgroup>
<tr>
<td style="text-align: left;">
<h5>Choose Package</h5>
</td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox amount" data-col="colC" onclick="ChangeColColor(this,'colC')" />
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox amount" data-col="colD" onclick="ChangeColColor(this,'colD')" />
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox amount" data-col="colE" onclick="ChangeColColor(this,'colE')" />
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx" class="css-checkbox amount" />
<label for="tcbx" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%">
<lbl id="lblBtn" />
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx4" value="19.00" class="css-checkbox amount" />
<label for="tcbx4" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx5" value="49.00" class="css-checkbox amount" />
<label for="tcbx5" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx6" value="75.00" class="css-checkbox amount" />
<label for="tcbx6" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Total:
<input type="text" class="txt7" />
I have added a class amount to those input fields which has to trigger a total change
I have a code which is working properly for parent/child/subchild relation but I want to remove fieldset and div from my html code and I will add tr and td for each line and then how to modify jquery code for the same.
html code
<form>
<input type="checkbox" class="mainCheckBox" /> Select All <br />
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 1 <br />
<div class="content">
<input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1<br /> <input
type="radio" name="cnstates" id="OT" checked />Sub Child 1<br />
<input type="radio" name="cnstates" id="AT" checked />Sub Child 2
<br /> <input type="checkbox" value="" name=""country""
class="childCheckBox" /> Child 2 <br /> <input
type="radio" name="usstates" id="NY" checked />Sub Child 1<br />
<input type="radio" name="usstates" id="DC" />Sub Child 2
DC
</div>
</fieldset>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 2 <br />
<div class="content">
<input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1<br /> <input
type="radio" name="instates" id="MU" checked />Sub Child 1<br />
<input type="radio" name="instates" id="DL" checked />Sub Child 2
<br /> <input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2<br /> <input
type="radio" name="rustates" id="MW" checked />Sub Child 1<br />
<input type="radio" name="rustates" id="DC" />Sub Child 2
</div>
</fieldset>
Jquery which is working fine with fieldset but how to modify it for tr and td which I will add
$(document).ready(
function() {
$('.mainCheckBox').on('change', function(){
$(this).closest('form').find(':checkbox').prop('checked', this.checked);
});
$('input.childCheckBox').change(function() {
$(this).closest('fieldset').find('.parentCheckBox').prop('checked',
$('input.childCheckBox').length === $('input.childCheckBox:checked').length
);
});
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
}
);
jsfiddle.net/YDgHN/43/
I want to implement parent,child & subchild relation on below code
<form>
<table width="90%" border="1" cellspacing="0" cellpadding="1">
<tr>
<td colspan="2"><input type="checkbox" class="mainCheckBox" /> Select All
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 1
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="cnstates" id="OT" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="cnstates" id="AT" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="usstates" id="NY" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="usstates" id="DC" />Sub Child 2
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 2
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1
<tr>
<td colspan="2"><input type="radio" name="instates" id="MU" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="instates" id="DL" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="rustates" id="MW" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="rustates" id="DC" />Sub Child 2</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td colspan="2"><input type="checkbox" class="parentCheckBox" /> Parent 3
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 1
<tr>
<td colspan="2"><input type="radio" name="instates" id="MU" checked />Sub
Child 1</td>
</tr>
<tr>
<td colspan="2"><input type="radio" name="instates" id="DL" checked />Sub
Child 2</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="" name="country"
class="childCheckBox" /> Child 2</td>
</tr>
<tr>
<td><input type="checkbox" name="rustates" id="MW" checked />Sub
Child 1</td><td><input type="checkbox" name="rustates" id="DC" />Sub Child 2</td>
</tr>
<tr>
</tr>
</table>
</form>
1) If select all is checked all check box except sub child checbox should be checked
2) if parent is select all child except subchild should be checked
3) if all child are select parent should be select.
Regards,
Pise
Here's your new js.
$('.mainCheckBox').on('change', function(){
$(this).closest('form').find(':checkbox').prop('checked', this.checked);
});
$('input.childCheckBox').change(function() {
parent = $(this).parent().parent().prevAll("tr:has(.parentCheckBox)").find(".parentCheckBox").last();
all_checked = true;
parent.parent().parent().nextUntil("tr:has(.parentCheckBox)").find("[type=checkbox]").each(function(){
if(!$(this).prop("checked")) all_checked = false;
});
parent.prop("checked", all_checked );
select_all = true;
if($(".childCheckBox, .parentCheckBox").not(":checked").length != 0)
select_all = false;
$('.mainCheckBox').prop("checked",select_all);
});
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parent().parent().nextUntil("tr:has(.parentCheckBox)").find("[type=checkbox]").prop('checked', this.checked);
}
);