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>
Related
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>
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/
I wanna make 4 lines of radio buttons
line 1, line 2, line 3 and last line
if i click reset button
the radio button back to its normal choice(check or uncheck)
but i wanna make the line 1 doesnt affected(not reset)
since this script reset/clear all radio button
thank you
$('#reset').on('click', function() {
$('input[type=radio]').prop('checked', function() {
return this.getAttribute('checked') == 'checked';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="rdo1" value="a" checked="checked" /> A
<input type="radio" name="rdo1" value="b" /> B
<input type="radio" name="rdo1" value="c" /> C
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo2" value="1" /> 1
<input type="radio" name="rdo2" value="2" checked="checked" /> 2
<input type="radio" name="rdo2" value="3" /> 3
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo3" value="1a" /> 1a
<input type="radio" name="rdo3" value="2b" /> 2b
<input type="radio" name="rdo3" value="3c" checked="checked" /> 3c
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo4" value="11a" /> 1a
<input type="radio" name="rdo4" value="12b" /> 2b
<input type="radio" name="rdo4" value="13c" /> 3c
</td>
</tr>
<tr>
<td>
<button id="reset">Reset</button>
</td>
</tr>
</table>
You can check that by getting the name or use the .not selector too
$('#reset').on('click', function() {
$('input[type=radio]').prop('checked', function () {
var rdoName = $(this).attr('name');
if(rdoName != 'rdo1'){
return this.getAttribute('checked') == 'checked';
}
});
});
You can use the .not() method or :not() selector to exclude the ones you don't want to reset:
$('input[type=radio]').not('[name="rdo1"]').prop('checked', function () {
return this.getAttribute('checked') == 'checked';
});
Expand and run the following snippet to see it in context.
$('#reset').on('click', function() {
$('input[type=radio]').not('[name="rdo1"]').prop('checked', function () {
return this.getAttribute('checked') == 'checked';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="rdo1" value="a" checked="checked" />
A
<input type="radio" name="rdo1" value="b" />
B
<input type="radio" name="rdo1" value="c" />
C
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo2" value="1" />
1
<input type="radio" name="rdo2" value="2" checked="checked" />
2
<input type="radio" name="rdo2" value="3" />
3
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo3" value="1a" />
1a
<input type="radio" name="rdo3" value="2b" />
2b
<input type="radio" name="rdo3" value="3c" checked="checked" />
3c
</td>
</tr>
<tr>
<td>
<input type="radio" name="rdo4" value="11a" />
1a
<input type="radio" name="rdo4" value="12b" />
2b
<input type="radio" name="rdo4" value="13c"/>
3c
</td>
</tr>
<tr>
<td>
<button id="reset">Reset</button>
</td>
</tr>
</table>
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>
I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>
It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes
I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>
I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>
Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}