Develop Reference

Summary of Selected Radio Buttons

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>

Find the closest radio button which is not disabled and checked it

I have code as:
let aid = 1;
if($("#ar_"+aid+" .radio input:checked").is(':disabled')){
$("#ar_"+aid).closest('.radio input').is(':enabled').attr("checked",true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
Here, I have lists of radio buttons. So, at first I will have a id, in this case I have considered that id as 1. Now, I want to do the following things:
check if the radio button with id ar_+aid is disabled (already done)
if it is disabled find the next radio button which is not disabled (i.e, radio button with the same name) of this case the third (ar_3) should be is the closest one, however, it shouldn't go to another radio group.
if every radio button is disabled just console the message, that all are disabled. (i.e if I pass id 11, this should throw an error as all 12,9 and 10 are disabled)
How could I achieve it? Let me know if you need anything more.

You can use name attribute of radio buttton to find the input which is not disabled using $("input[name=" + name + "]:not(:disabled):first") which will checked if the radio with name is not disable and get the :first input while searching then you can use .prop('checked', true) to add checked attribute to that radio button.
Demo Code :
let aid = 1;
//get name of radio
var name = $("#ar_" + aid + " .radio input").attr("name");
//check if disable
if ($("#ar_" + aid + " .radio input").is(':disabled')) {
var count = 0;
//get the rado button whch is not disable
$("input[name=" + name + "]:not(:disabled):first").each(function() {
$(this).prop('checked', true) //prop true
count++;
})
if (count == 0) {
console.log("All disable....")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>

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>

Count number of checkboxes checked in a table column

I am now struggling with counting number of checkboxes checked in a column.
I am trying to count them and display a total at the bottom.
My html is as follows. There are alot more columns!
<tr>
<th>Public Safety</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
And my jquery so far:
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function () {
$(" #tblRootCauseBody tr:not(:last-child) td:nth-child("+ (that.closest('td').index() - 1) + ")").each(function () {
$(this).html();
});
});

To get the index of :nth-child()(index starts from 1), you need to add 1 to the value of .index()(starts from 0)
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() {
var index = $(this).closest('td').index() + 1,
$checked = $(" #tblRootCauseBody tr:not(:last-child) td:nth-child(" + (index) + ") input:checked");
$('#tblRootCauseBody tr:last-child > :nth-child(' + index + ')').text($checked.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="tblRootCauseBody">
<tr>
<th>Public Safety</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Simulate a click on multiple Checkboxes to issue AJAX request when checkbox attribute is changed with jQuery

I have a Matrix style Grid that allows to updatye some user permissions for items on a Per user basis.
It uses a Table grid and issues an AJAX request to update each setting instantly as clicked on.
I just added some jQuery code to mass check and un-check all checkboxes for a User row.
The issue I have is I need to make it also make the AJAX request for all those checkboxes in a Row when the Row is mass checked or un-checked
I have all code below for the demo and a JSFiddle demo.
JSFiddle Demo: http://jsfiddle.net/jasondavis/7597y7q5/
Preview Image:
JavaScript/jQuery:
$(document).ready(function() {
// Check/Un-check All checkboxes in a User Row
$(".checkall").click(function(){
$(this).parents('tr').find(':checkbox').prop('checked', this.checked);
});
// Make AJAX Request to Update User Permission setting in Backend Database
$(".flipswitch").change(function () {
var flip = $(this).closest('td');
//alert("perm_id="+this.value+"&permissions=" + this.checked);
$.ajax({
type: 'post',
url: '<?php echo $_SERVER['PHP_SELF']; ?>',
data: "perm_id="+ this.value + "&permission=" + this.checked,
success: function() {
flip.effect("highlight", {color:"#12D812"}, 2000)
}
});
});
});
Table HTML:
<table>
<tbody>
<tr class="table_header">
<th> </th>
<th align="center">https://google.com/-1</th>
<th align="center">https://google.com/-2</th>
<th align="center">https://google.com/-3</th>
<th align="center">https://google.com/-4</th>
<th align="center">https://google.com/-5</th>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 1-1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="0" type="checkbox" value="1">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="1" type="checkbox" value="2">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="2" type="checkbox" value="3">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="3" type="checkbox" value="4">1</td>
<td align="center">user 1<input checked="checked" class=
"flipswitch" name="4" type="checkbox" value="5">1</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 2-2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="5" type="checkbox" value="6">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="6" type="checkbox" value="7">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="7" type="checkbox" value="8">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="8" type="checkbox" value="9">2</td>
<td align="center">user 2<input checked="checked" class=
"flipswitch" name="9" type="checkbox" value="10">2</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 3-3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="10" type="checkbox" value="11">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="11" type="checkbox" value="12">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="12" type="checkbox" value="13">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="13" type="checkbox" value="14">3</td>
<td align="center">user 3<input checked="checked" class=
"flipswitch" name="14" type="checkbox" value="15">3</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 4-4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="15" type="checkbox" value="16">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="16" type="checkbox" value="17">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="17" type="checkbox" value="18">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="18" type="checkbox" value="19">4</td>
<td align="center">user 4<input checked="checked" class=
"flipswitch" name="19" type="checkbox" value="20">4</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 5-5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="20" type="checkbox" value="21">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="21" type="checkbox" value="22">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="22" type="checkbox" value="23">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="23" type="checkbox" value="24">5</td>
<td align="center">user 5<input checked="checked" class=
"flipswitch" name="24" type="checkbox" value="25">5</td>
</tr>
<tr>
<td><input class="checkall" type="checkbox"> user 6-6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="25" type="checkbox" value="26">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="26" type="checkbox" value="27">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="27" type="checkbox" value="28">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="28" type="checkbox" value="29">6</td>
<td align="center">user 6<input checked="checked" class=
"flipswitch" name="29" type="checkbox" value="30">6</td>
</tr>
</tbody>
</table>
little CSS:
table { border: 1px solid #000; }
th { background-color: #CCC; }
td { border: 1px solid #CCC; }

Will fire off a lot of requests all at once but first thing you could try is simply triggering change event when you set the checked property
$(".checkall").click(function(){
$(this).parents('tr')
.find(':checkbox')
.prop('checked', this.checked)
.change();// trigger change event
});

I figured it out.
I added a change() call to issue/trigger a change...
$(this).parents('tr').find(':checkbox').change();
So updated jQuery code is...
$(document).ready(function() {
$(".checkall").click(function(){
$(this).parents('tr').find(':checkbox').prop('checked', this.checked);
$(this).parents('tr').find(':checkbox').change();
});
$(".flipswitch").change(function () {
var flip = $(this).closest('td');
//alert("perm_id="+this.value+"&permissions=" + this.checked);
$.ajax({
type: 'post',
url: '/echo/html/',
data: "perm_id="+ this.value + "&permission=" + this.checked,
success: function() {
flip.effect("highlight", {color:"#12D812"}, 2000)
}
});
});
});
Updated JSFiddle http://jsfiddle.net/jasondavis/7597y7q5/6/ issues AJAX requests X Number of columns when checkbox to mass update a row is clicked now. So ass all checkboxes in a row are checked and unchecked, there is an AJAX request for each checkbox being made as well.
Hopefully this helps others. I posted this answer instead of deleting the question for my own personal reference in the future.
If there is a better way, i'm open to that too of course! Thanks
UPDATE
As per #charlietfl's answer, is best to append my change() to the end of my current jQuery element search/lookup instead of doing a 2nd lookup to find checkboxes...
$(this).parents('tr').find(':checkbox').prop('checked', this.checked).change();