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
Related
VIEW PAGE
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="1" /><input type="hidden" name="amount[]" value="500" tabindex ="-1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="2" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="3" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="4" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="5" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
</tbody>
MY REQUIREMENT
I want to save bellowed data's to table
1. bene_id
2. Bonus ₹
3. Stipendiary ₹
I've fetch this table data form existing Beneficiary Table. So Bene_id and Stipendiary ₹ value get from that tabel. Bonus ₹ will be an input.
Now i want to save table data to the payment table.
I'm trying to post the value by array. it's working fine.
now i've an issue with the check box. i want to neglect the row value that unchecked. That means i want row value which was checkbox : checked
i'm expecting jquery for passing checkbox : checked row value to hidden input array.
As i told you in the comments section, you can use normal HTML forms to submit to the action method on your controller, but you need to modify your form a little bit, this is the easiest solution.
Despite of option one simplicity i decided to give you another approach to solve this problem, so first look at the code of HTML and JavaScript:
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody id="details">
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="2" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="3" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="4" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="5" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
</tbody>
</table>
<button id="submit">Submit</button>
<script type="text/javascript" src="<?= base_url(assets/js/jquery.min.js) ?>"></script>
<script type="text/javascript">
function jsonify(){
var rows = $('#details tr');
var a = [];
rows.each(function(){
if($(this).find('#bene_id').is(':checked'))
{
var bene_id = $(this).find('#bene_id').val();
var stipendiary = $(this).find('#amount').html();
var bonus = $(this).find('#bonus').val();
var x = {
bene_id:bene_id,
stipendiary:stipendiary,
bonus:bonus
};
a.push(x);
}
});
var c = JSON.stringify(a);
return c;
}
$(function(){
$('#submit').click(function(){
$data = jsonify();
$.ajax({
type:'POST',
url:'<?= base_url('controller/method_name') ?>',
data:{details:data},
success:function(response)
{
//if you data save successfuly, do sth here..
}
});
});
});
The following code is a PHP code of the action method on the specified controller:
public function method_name()
{
$details = json_decode($this->input->post('details'));
foreach($details as $det ){
$bene_id = $det->bene_id;
$stipendiary = $det->stipendiary;
$bonus = $det->bonus;
// your logic goes here
}
}
In this solution i didn't considered the validation and security issues, because i wanted to make it simple, so before you put it in your production server you must deal with these issues.
I hope it helps.
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.
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.
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong>
</p>
</div>
<br>
<br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A1" name="S1A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A1">Strongly Disagree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A2" name="S1B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A2">Disagree</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION1A3" name="S1C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION1A3">Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A4" name="S1D" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A4">Agree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A5" name="S1E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A5">Strongly Agree</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 2) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong>
</p>
<br>
<br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A1" name="S2A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A1">Monday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A2" name="S2B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A2">Tuesday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A3" name="S2C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A3">Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A4" name="S2D" type=
"checkbox" value="4"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A4">Thursday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A5" name="S2E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A5">Friday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A6" name="S2F" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A6">Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A7" name="S2G" type=
"checkbox" value="7"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A7">Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 4) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5"><button type="submit"><label class=
"c5">NEXT</label></button></label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
<p id="demo">
</p>
If more than 2 checkboxes has been checked I want to disable the first question's checkboxes and it's working but my main problem is, If it happens it block to select all of the checkboxes on the same page.But you have to check less than 4 for question two.
if you target input[type=checkbox] then it will point to every check box in the DOM
so i made the name of all checkbox's in each question to be same
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="content-type" content="text/html; charset=windows-1254" />
<meta http-equiv="content-type" content="text/html; charset=x-mac-turkish" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/styles/_reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/styles/main3.css" />
</head>
<body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A1" class="c4">
Strongly Disagree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A2" class="c5">
Disagree</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S1" id="QUESTION1A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A3" class="c6">
Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A4" class="c4">
Agree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A5" class="c5">
Strongly Agree </label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var QUS1 = $("input[name=S1]:checked").length;
if (QUS1 > 2) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
var QUS2 = $("input[name=S2]:checked").length;
if (QUS2 > 4) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" id="QUESTION2A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A1" class="c4">
Monday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A2" class="c5">
Tuesday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A3" class="c6">
Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="4" id="QUESTION2A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A4" class="c4">
Thursday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A5" class="c5">
Friday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A6" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A6" class="c6">
Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="7" id="QUESTION2A7" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A7" class="c4">
Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5">
<button type="submit">NEXT
</button>
</label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
</form>
<p id="demo"></p>
</div>
</form>
</body>
</html>
I have a form which contains 2 radio butttons & one of them is checked by default. I have disabled some fields & wanted to enable it when 2nd radio button is checked, and disable them (also wanted to regain CSS properties) when 1st radio button is checked.
Right now, I can do it only for input field without any script.
Any help will be appreciated.
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] {
background: #ddddbb;
color: black;
cursor: default;
}
input[type="text"]:disabled, input[type="select"]:disabled {
background: #ddddbb;
}
<html>
<title>Form</title>
<body bgcolor="#FFFFFF" topmargin="20" leftmargin="50">
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" onclick="document.getElementById('project_id').disabled=true;" />
<label for="generic_test">Generic Test</label>
<input type="radio"
name="radSize"
id="project_test"
value="true" onclick="document.getElementById('project_id').disabled=false;" /><label for="project_test">Project Test</label>
<table align="left">
<tr>
<tr>
<td width="126" height="24" align="left"
valign="middle">
<span class="f1">Project ID <span class="star">*</span></span>
</td>
<td width="126" height="24" align="left"
valign="middle">
<input type="text"
name="project_id" id="project_id" size="19"
value="" disabled="disabled">
</td>
</tr>
<tr>
<td height="24" width="50" align="left"
valign="middle">
<span class="f1"> Multiphase <span class="star">*</span></span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
<select name="multiphase"
id="multiphase"
onchange="onChangeFunction();" disabled="disabled">
<option value='' selected></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<div>
<tr>
<td class="f1">Text Area<br><span class="star">*</span> </td>
<td>
<textarea id="textInputField3"
name="textInputField3"
style="resize:vertical; text-align:top; "
rows="5"
cols="52"
disabled="disabled"></textarea>
</td>
</tr>
</div>
</tr>
</table>
To let the css rule work, use removeAttribute for the Attribute disabled to enable the field or setAttribute to disable it. https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute
https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute
function enable(enabled){
var project = document.getElementById('project_id'),
multiphase = document.getElementById('multiphase');
textInputField3 = document.getElementById('textInputField3');
if(enabled){
project.removeAttribute('disabled');
multiphase.removeAttribute('disabled');
textInputField3.removeAttribute('disabled');
} else {
project.setAttribute('disabled','disabled');
multiphase.setAttribute('disabled','disabled');
textInputField3.setAttribute('disabled','disabled');
}
}
input, textarea, select {
background: #fff;
color: black;
cursor: default;
}
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] {
background: #ddddbb;
}
input[type="text"]:disabled, input[type="select"]:disabled {
background: #ddddbb;
}
<html>
<title>Form</title>
<body bgcolor="#FFFFFF" topmargin="20" leftmargin="50">
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" onclick="enable(false)" />
<label for="generic_test">Generic Test</label>
<input type="radio"
name="radSize"
id="project_test"
value="true" onclick="enable(true)" /><label for="project_test">Project Test</label>
<table align="left">
<tr>
<tr>
<td width="126" height="24" align="left"
valign="middle">
<span class="f1">Project ID <span class="star">*</span></span>
</td>
<td width="126" height="24" align="left"
valign="middle">
<input type="text"
name="project_id" id="project_id" size="19"
value="" disabled="disabled">
</td>
</tr>
<tr>
<td height="24" width="50" align="left"
valign="middle">
<span class="f1"> Multiphase <span class="star">*</span></span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
<select name="multiphase"
id="multiphase"
onchange="onChangeFunction();" disabled="disabled">
<option value='' selected></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<div>
<tr>
<td class="f1">Text Area<br><span class="star">*</span> </td>
<td>
<textarea id="textInputField3"
name="textInputField3"
style="resize:vertical; text-align:top; "
rows="5"
cols="52"
disabled="disabled"></textarea>
</td>
</tr>
</div>
</tr>
</table>