Summary of Selected Radio Buttons

Summary of Selected Radio Buttons - javascript

I am interested in producing a summary of the selected radio buttons and checkboxes on an HTML form. I've figured out how to produce a summary of the input for text fields, but not radio buttons or checkboxes. (Sorry this is very basic, I'm very new to JavaScript.) I tried approaching the radio buttons in a similar way to how I produced the order summary for the text fields, but that didn't work.
function calcOrder() {
var firstName = document.getElementById ("firstName").value;
var lastName = document.getElementById ("lastName").value;
var userName = firstName + " " + lastName;
var phone = document.getElementById ("phone").value;
var email = document.getElementById ("email").value;
document.getElementById ("orderConfirm").innerHTML = "<h4>Order Summary:</h4>";
document.getElementById ("orderConfirm").innerHTML += "<p>" + userName + "<br>" + phone + "<br>" + email + "</p>";
}
<form>
<table border="0">
<tr> <!--First Name-->
<td class="lable_col">First Name:</td>
<td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td>
<td class="feedback_col"><span id="firstNamePrompt"> </span></td>
</tr>
<tr> <!--Last Name-->
<td class="lable_col">Last Name:</td>
<td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td>
<td class="feedback_col"><span id="lastNamePrompt"> </span></td>
</tr>
<tr> <!--Phone Number-->
<td class="lable_col">Phone:</td>
<td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td>
<td class="feedback_col"><span id="phonePrompt"> </span></td>
</tr>
<tr> <!--Email-->
<td class="lable_col">Email:</td>
<td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith#gmail.com" onblur="validateEmail();"></td>
<td class="feedback_col"><span id="emailPrompt"> </span></td>
</tr>
</table>
<h3>Order</h3>
Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br>
<input type="radio" name="burritoorbowl" value="Bowl">Bowl<br>
Rice <br><input type="radio" name="rice" value="White" checked>White<br>
<input type="radio" name="rice" value="Brown">Brown<br>
<input type="radio" name="rice" value="None">None<br>
Beans <br><input type="radio" name="beans" value="Black" checked>Black<br>
<input type="radio" name="beans" value="Pinto">Pinto<br>
<input type="radio" name="beans" value="None">None<br>
Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br>
<input type="radio" name="protein" value="Pork">Pork<br>
<input type="radio" name="protein" value="Chickn">Chicken<br>
<input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br>
<input type="radio" name="protein" value="None">None<br>
Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br>
<input type="checkbox" name="toppings" value="Lettuce">Lettuce<br>
<input type="checkbox" name="toppings" value="Cheese">Cheese<br>
<input type="checkbox" name="toppings" value="SourCream">Sour Cream<br>
<input type="checkbox" name="toppings" value="Corn">Corn<br>
<input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br>
<input type="checkbox" name="toppings" value="Salsa">Salsa<br>
<input type="checkbox" name="toppings" value="Guacamole">Guacamole<br>
<h3>Additional Instructions</h3>
<input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here...">
<br>
<span class="button" onclick="calcOrder();">Place Order</span>
<br>
<span id="orderConfirm"> </span>
</form>

You could use
document.querySelectorAll("input[type=radio]:checked");
document.querySelectorAll("input[type=checkbox]:checked");
in order to get all the selected checkboxes and radio buttons
here is an updated snippet
const confirmBtn = document.getElementById("confirm");
confirmBtn.addEventListener("click", calcOrder);
function calcOrder() {
var firstName = document.getElementById ("firstName").value;
var lastName = document.getElementById ("lastName").value;
var userName = firstName + " " + lastName;
var phone = document.getElementById ("phone").value;
var email = document.getElementById ("email").value;
const selectedRadio = document.querySelectorAll("input[type=radio]:checked");
const selectedCheckboxes = document.querySelectorAll("input[type=checkbox]:checked");
const result = document.getElementById("orderConfirm")
let radioResult = "";
let checkboxResult = "";
let order = `
<h4>Order Summary:</h4>
<p>${userName}<p>
<p>${phone}</p>
<p>${email}</p>
<ul>
`;
for (let i = 0; i < selectedRadio.length; i++) {
order += `<li>${selectedRadio[i].value}</li>`;
}
order += "</ul><ul>";
for (let i = 0; i < selectedCheckboxes.length; i++) {
order += `<li>${selectedCheckboxes[i].value}</li>`;
}
order += "</ul>";
result.innerHTML = order;
}
<form>
<table border="0">
<tr> <!--First Name-->
<td class="lable_col">First Name:</td>
<td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td>
<td class="feedback_col"><span id="firstNamePrompt"> </span></td>
</tr>
<tr> <!--Last Name-->
<td class="lable_col">Last Name:</td>
<td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td>
<td class="feedback_col"><span id="lastNamePrompt"> </span></td>
</tr>
<tr> <!--Phone Number-->
<td class="lable_col">Phone:</td>
<td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td>
<td class="feedback_col"><span id="phonePrompt"> </span></td>
</tr>
<tr> <!--Email-->
<td class="lable_col">Email:</td>
<td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith#gmail.com" onblur="validateEmail();"></td>
<td class="feedback_col"><span id="emailPrompt"> </span></td>
</tr>
</table>
<h3>Order</h3>
Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br>
<input type="radio" name="burritoorbowl" value="Bowl">Bowl<br>
Rice <br><input type="radio" name="rice" value="White" checked>White<br>
<input type="radio" name="rice" value="Brown">Brown<br>
<input type="radio" name="rice" value="None">None<br>
Beans <br><input type="radio" name="beans" value="Black" checked>Black<br>
<input type="radio" name="beans" value="Pinto">Pinto<br>
<input type="radio" name="beans" value="None">None<br>
Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br>
<input type="radio" name="protein" value="Pork">Pork<br>
<input type="radio" name="protein" value="Chickn">Chicken<br>
<input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br>
<input type="radio" name="protein" value="None">None<br>
Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br>
<input type="checkbox" name="toppings" value="Lettuce">Lettuce<br>
<input type="checkbox" name="toppings" value="Cheese">Cheese<br>
<input type="checkbox" name="toppings" value="SourCream">Sour Cream<br>
<input type="checkbox" name="toppings" value="Corn">Corn<br>
<input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br>
<input type="checkbox" name="toppings" value="Salsa">Salsa<br>
<input type="checkbox" name="toppings" value="Guacamole">Guacamole<br>
<h3>Additional Instructions</h3>
<input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here...">
<br>
<br>
</form>
<button id="confirm" class="button">Place Order</button>
<span id="orderConfirm"> </span>

Check this do you want all select values of form input check and radio buttons ?
const form = document.querySelector('form')
let summary;
form.addEventListener('change', function() {
summary = Object.values(form).reduce((obj,field) => { obj[field.name] = field.value; return obj }, {})
console.log(summary)
});
<form id="my-form">
<table border="0">
<tr> <!--First Name-->
<td class="lable_col">First Name:</td>
<td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td>
<td class="feedback_col"><span id="firstNamePrompt"> </span></td>
</tr>
<tr> <!--Last Name-->
<td class="lable_col">Last Name:</td>
<td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td>
<td class="feedback_col"><span id="lastNamePrompt"> </span></td>
</tr>
<tr> <!--Phone Number-->
<td class="lable_col">Phone:</td>
<td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td>
<td class="feedback_col"><span id="phonePrompt"> </span></td>
</tr>
<tr> <!--Email-->
<td class="lable_col">Email:</td>
<td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith#gmail.com" onblur="validateEmail();"></td>
<td class="feedback_col"><span id="emailPrompt"> </span></td>
</tr>
</table>
<h3>Order</h3>
Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br>
<input type="radio" name="burritoorbowl" value="Bowl">Bowl<br>
Rice <br><input type="radio" name="rice" value="White" checked>White<br>
<input type="radio" name="rice" value="Brown">Brown<br>
<input type="radio" name="rice" value="None">None<br>
Beans <br><input type="radio" name="beans" value="Black" checked>Black<br>
<input type="radio" name="beans" value="Pinto">Pinto<br>
<input type="radio" name="beans" value="None">None<br>
Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br>
<input type="radio" name="protein" value="Pork">Pork<br>
<input type="radio" name="protein" value="Chickn">Chicken<br>
<input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br>
<input type="radio" name="protein" value="None">None<br>
Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br>
<input type="checkbox" name="toppings" value="Lettuce">Lettuce<br>
<input type="checkbox" name="toppings" value="Cheese">Cheese<br>
<input type="checkbox" name="toppings" value="SourCream">Sour Cream<br>
<input type="checkbox" name="toppings" value="Corn">Corn<br>
<input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br>
<input type="checkbox" name="toppings" value="Salsa">Salsa<br>
<input type="checkbox" name="toppings" value="Guacamole">Guacamole<br>
<h3>Additional Instructions</h3>
<input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here...">
<br>
<span class="button" onclick="calcOrder();">Place Order</span>
<br>
<span id="orderConfirm"> </span>
</form>

Related

How to add each contents' value separately and add them all?

I'd like to calculate values in form. Each total from each table with the class of category needs to be filled in the textbox named subtotal. Then, each values of input named subtotal needs to be added and filled in the textbox named total.
However, I am totally stack, then, can not figure out. Please help.
I've tried to loop each table to calculate but didn't work.
function calc() {
price = 0;
for (i = 0; i < document.myform.length - 1; i++) {
if (document.myform.elements[i].checked) {
price += eval(document.myform.elements[i].value);
}
}
document.myform.subtotal.value = price;
var sumup = 0;
for (var i = 0; i < subtotal.length; i++) {
sumup += eval(subtotal[i].value);
}
document.myform.total.value = sumup;
document.myform.discount30.value = sumup * .7;
}
<form name="myform">
<table class="category">
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<ul>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<input type="text" name="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<input type="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
<ul>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
</ul>
<label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
</td>
</tr>
<tr>
<td><label>amount：<input type="text" name="subtotal">yen</label></td>
</tr>
</table>
<table class="category">
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<ul>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<input type="text" name="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<input type="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
<ul>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
</ul>
<label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
</td>
</tr>
<tr>
<td><label>amount：<input type="text" name="subtotal">yen</label></td>
</tr>
</table>
<table class="output">
<tr>
<td><label>total：<input type="text" name="total">yen</label></td>
</tr>
<tr>
<td><label>30% discount：<input type="text" name="discount30">yen</label></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</form>

display duplicate values when checked two binding checkbox

my two synchronized checkbox displayed duplicate values when checked, how to fix it? I just want to show one single value of each checkbox
see the demo
http://jsfiddle.net/HvKmE/1127/
seems need more words to ask a question...
$('[type="checkbox"]').on('change', function() {
var selector = $(this).data('selector');
$('[data-selector="' + selector + '"]').prop("checked", this.checked);
});
$(':checkbox').on('change', function() {
var values = $(':checkbox:checked').map(function() {
return this.value;
}).get().join(',');
$('p').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX-1">GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1">SPS01
<br>
</div>
<div>
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01">
</TD1 <TD class="col-ne col-CS">
<INPUT name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01">
<p></p>

Firstly note that you don't need to two separate change event handlers. They both point to the same elements, so you can combine them.
Secondly, your HTML is invalid as you cannot have a td element as a child of a div. It need to be contained within a table, tbody, then tr. The p element also needs to be moved outside of that table. You should also wrap the checkboxes and their associated text nodes in label elements to increase their hit area as a courtesy to your users.
To fix the issue of duplicate values appearing, simply make the :checkbox selector more specific; restrict it to the #CS-popup element for example:
var values = $('#CS-popup :checkbox:checked').map(function() ...
Here's a full working example with the JS and HTML corrected:
$(':checkbox').on('change', function() {
var selector = $(this).data('selector');
$('[data-selector="' + selector + '"]').prop("checked", this.checked);
var values = $('#CS-popup :checkbox:checked').map(function() {
return this.value;
}).get().join(',');
$('p').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<label>
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX-1" />
GMSC01
</label>
<label>
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1" />
GMSC02
</label>
<label>
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1" />
VMSC01
</label><br />
<label>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">
VMSC02
<label>
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1" />
GMGW01
<label>
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1" />
GMGW02
</label><br />
<label>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1" />
VMGW01
</label>
<label>
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1" />
VMGW02
</label>
<label>
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1" />
SPS01
</label><br />
</div>
<div>
<table>
<tbody>
<tr>
<td class="col-ne col-CS">
<input name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02" />
</td>
<td class="col-ne col-CS">
<input name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01" />
</td>
</tr>
</tbody>
</table>
</div>
<p></p>

how to select a specific div smartly without using id

currently I am building a table which includes two same checkbox group which needs to be checked automatically when another was checked, below is the jquery script I am using, how can I use a smarted way to handle this function instead of using millions of ID like I do at present?
$(document).ready(function() {
$("#GMSC01BOX-1").change(function() {
$("#GMSC01BOX-2").prop("checked", this.checked);
});
$("#GMSC01BOX-2").change(function() {
$("#GMSC01BOX-1").prop("checked", this.checked);
});
$("#GMSC02BOX-1").change(function() {
$("#GMSC02BOX-2").prop("checked", this.checked);
});
$("#GMSC02BOX-2").change(function() {
$("#GMSC02BOX-1").prop("checked", this.checked);
});
$("#VMSC01BOX-1").change(function() {
$("#VMSC01BOX-2").prop("checked", this.checked);
});
$("#VMSC01BOX-2").change(function() {
$("#VMSC01BOX-1").prop("checked", this.checked);
});
$("#VMSC02BOX-1").change(function() {
$("#VMSC02BOX-2").prop("checked", this.checked);
});
$("#VMSC02BOX-2").change(function() {
$("#VMSC02BOX-1").prop("checked", this.checked);
});
$("#GMGW01BOX-1").change(function() {
$("#GMGW01BOX-2").prop("checked", this.checked);
});
$("#GMGW01BOX-2").change(function() {
$("#GMGW01BOX-1").prop("checked", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" id="GMSC01BOX-1">GMSC01
<input type="checkbox" name="CS" value="GMSC02" id="GMSC02BOX-1">GMSC02
<input type="checkbox" name="CS" value="VMSC01" id="VMSC01BOX-1">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" id="VMSC02BOX-1">VMSC02
<input type="checkbox" name="CS" value="GMGW01" id="GMGW01BOX-1">GMGW01
<input type="checkbox" name="CS" value="GMGW02" id="GMGW02BOX-1">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" id="VMGW01BOX-1">VMGW01
<input type="checkbox" name="CS" value="VMGW02" id="VMGW02BOX-1">VMGW02
<input type="checkbox" name="CS" value="SPS01" id="SPS01BOX-1">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" id="SPS02BOX-1">SPS02
<input type="checkbox" name="CS" value="HSS01" id="HSS01BOX-1">HSS01
<input type="checkbox" name="CS" value="HSS02" id="HSS02BOX-1">HSS02
<br>
</div>
<div>
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne016" type="checkbox" id="GMSC02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne017" type="checkbox" id="VMSC01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne018" type="checkbox" id="VMSC02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne019" type="checkbox" id="GMGW01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne020" type="checkbox" id="GMGW02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne021" type="checkbox" id="VMGW01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne022" type="checkbox" id="VMGW02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne023" type="checkbox" id="SPS01BOX-2">
http://jsfiddle.net/HvKmE/1127/

Between the related group of check box, the only matching part is the first 6 digits of id. You can use .each() to check whether the matching id part startsWith() any other checkbox or not:
$(document).ready(function() {
$('[type="checkbox"]').on('change',function(){
var idMachedPart = this.id.substring(0,6);
var status = this.checked;
$('[type=checkbox]').each(function(){
if(this.id.startsWith(idMachedPart))
$(this).prop('checked', status);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" id="GMSC01BOX-1">GMSC01
<input type="checkbox" name="CS" value="GMSC02" id="GMSC02BOX-1">GMSC02
<input type="checkbox" name="CS" value="VMSC01" id="VMSC01BOX-1">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" id="VMSC02BOX-1">VMSC02
<input type="checkbox" name="CS" value="GMGW01" id="GMGW01BOX-1">GMGW01
<input type="checkbox" name="CS" value="GMGW02" id="GMGW02BOX-1">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" id="VMGW01BOX-1">VMGW01
<input type="checkbox" name="CS" value="VMGW02" id="VMGW02BOX-1">VMGW02
<input type="checkbox" name="CS" value="SPS01" id="SPS01BOX-1">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" id="SPS02BOX-1">SPS02
<input type="checkbox" name="CS" value="HSS01" id="HSS01BOX-1">HSS01
<input type="checkbox" name="CS" value="HSS02" id="HSS02BOX-1">HSS02
<br>
</div>
<div>
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne016" type="checkbox" id="GMSC02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne017" type="checkbox" id="VMSC01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne018" type="checkbox" id="VMSC02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne019" type="checkbox" id="GMGW01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne020" type="checkbox" id="GMGW02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne021" type="checkbox" id="VMGW01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne022" type="checkbox" id="VMGW02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne023" type="checkbox" id="SPS01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne024" type="checkbox" id="SPS02BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne025" type="checkbox" id="HSS01BOX-2">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne026" type="checkbox" id="HSS02BOX-2">
</TD>
</div>
</div>
Please Note: You should look your HTML. To me this not entirely valid.

You can do it like this :
i added a data-selector attribute to every checkbox and it have same value for pairs
if we use class then there is a chance of style overriding
$('[type="checkbox"]').on('change',function(){
var selector = $(this).data('selector');
$('[data-selector="'+selector +'"]').prop("checked", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector ="GMSC01BOX-1" >GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX-1">SPS02
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX-1">HSS01
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX-1">HSS02
<br>
</div>
<div>
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" data-selector ="GMSC01BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1">
</TD1
<TD class="col-ne col-CS">
<INPUT name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1">
</TD>
<TD class="col-ne col-CS">
<INPUT name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1">

I can think of two ways here
First: The repetitive way
Use a class and toggle each checkbox with the same class
$(".box-1").change(function() {
$(".box-1").prop("checked", this.checked);
});
<input type="checkbox" name="CS" value="GMSC01" class="box-1">GMSC01
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2" class="box-1">
</TD>
Fiddle here : http://jsfiddle.net/sktnye6p/2/
My favorite way and also dynamic and for reusability
I'll use the data- attribute
Declare a class that will be use for each checkbox
$(".box").change(function() {
var index = $(this).data("index");
let target = $(document).find("[data-index='" + index + "']");
$(target).prop("checked", this.checked);
});
<input type="checkbox" name="CS" value="GMSC01" class="box" data-index="1">GMSC01
<TD class="col-ne col-CS">
<INPUT name="cf_ne015" type="checkbox" class="box" data-index="1">
</TD>
Fiddle here : http://jsfiddle.net/sLzgxty0/4/

JQuery radio button hierarchical element hiding

I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>

welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>

Limiting user for number of checkboxes to checked

I am trying to develop a page in which there are many check boxes but user is restricted to check only 2 checkboxes. I got this code but it is not working as i am giving it a name as array. Please suggest how to use this name for check boxes when calling th javascript function.
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup;
var limit=limit;
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0;
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0;
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" checkboxes");
this.checked=false;
}
}
}
}
checkboxlimit(document.forms.world.seatdata, 2);
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
<label for="A8">A8</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
<label for="A7">A7</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
<label for="A6">A6</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
<label for="A5">A5</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
<label for="A4">A4</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
</form>

Just change this line
checkboxlimit(document.forms.world.seatdata, 2); to checkboxlimit(document.forms.world["seatdata[]"], 2);
or use document.getElementsByName
checkboxlimit(document.getElementsByName("seatdata[]"), 2);

For pure javascript -
checkboxlimit(document.getElementsByName("seatdata[]"), 2);
For jQuery Users -
HTML code-
<input type="checkbox" class="abc" />hello1
<input type="checkbox" class="abc" />hello2
<input type="checkbox" class="abc" />hello3
<input type="checkbox" class="abc" />hello4
<input type="checkbox" class="abc" />hello5
<input type="checkbox" class="abc" />hello6
<input type="checkbox" class="abc" />hello7
<input type="checkbox" class="abc" />hello8
Jquery Code-
var limit = 2;
var count = 0;
$('.abc').change(function(){
count++;
if(count > limit){
alert("You cant select more than "+limit+" checkboxes");
this.checked=false;
}
});

Can you not use
checkboxlimit(document.getElementsByName('seatdata[]'), 2);

Develop Reference

JavaScript is the programming language of the Web.

Summary of Selected Radio Buttons - javascript

Related

How to add each contents' value separately and add them all?

display duplicate values when checked two binding checkbox

how to select a specific div smartly without using id

JQuery radio button hierarchical element hiding

Limiting user for number of checkboxes to checked

Categories

Resources