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);
Related
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>
I have code like this.
<input type="text" name="1" class = "inp<?=$p?> ">
<input type="text" name="2" class = "inp<?=$p?> ">
<input type="text" name="3" class = "inp<?=$p?> ">
<input type="text" name="4" class = "sum<?=$p?> ">
Here the jquery code
$('.inp0').keyup(function(){
var sum = 0;
var ave = 0;
$('.inp0').each(function(){
sum += +$(this).val();
});
ave = sum/3;
$('.sum0').val(ave.toFixed(2));
});
and it work properly but just for 1 row of input form.
if i do loop to my jquery code like
for(x=0;x<5;x++)
{*jquery code here*}
and change jquery selector to $('.inp'+x), only 5th row that can work but not for row 1 to 4.
can someone help me ? thanks before
Try something like this:
$('[class^="inp"]').keyup(function(){
var sum = 0;
var ave = 0;
var index = $(this).attr('class').split('p')[1];
$('.inp'+index).each(function(){
sum += $(this).val();
});
ave = sum/3;
$('.sum'+index).val(ave.toFixed(2));
});
You can group the elemnets by attributes and use that to select the elements like
$('.inp').keyup(function() {
var sum = 0;
var ave = 0;
var grp = $(this).data('grp');
$('.inp[data-grp="' + grp + '"]').each(function() {
sum += +$(this).val() || 0;
});
ave = sum / 3;
$('.sum[data-grp="' + grp + '"]').val(ave.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="1" data-grp="0" class="inp">
<input type="text" name="2" data-grp="0" class="inp">
<input type="text" name="3" data-grp="0" class="inp">
<input type="text" name="4" data-grp="0" class="sum">
<br />
<input type="text" name="1" data-grp="1" class="inp">
<input type="text" name="2" data-grp="1" class="inp">
<input type="text" name="3" data-grp="1" class="inp">
<input type="text" name="4" data-grp="1" class="sum">
<br />
<input type="text" name="1" data-grp="2" class="inp">
<input type="text" name="2" data-grp="2" class="inp">
<input type="text" name="3" data-grp="2" class="inp">
<input type="text" name="4" data-grp="2" class="sum">
<br />
Another way
$('.inp').keyup(function() {
var sum = 0;
var ave = 0;
var $tr = $(this).closest('tr');
$tr.find('.inp').each(function() {
sum += +$(this).val() || 0;
});
ave = sum / 3;
$tr.find('.sum').val(ave.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
</table>
You have just 1 input classed 'inp0'. Use a common class for all inputs and in the selector.
My purpose
When I click Check All in the first column, all check boxes in that column should be checked and the Set button should show up. While the other check boxes in other column should be unchecked. Besides, when I click Check All in the second column, the Set button in the first column will be hidden and show up in the second column and then uncheck other check boxes.
HTML CODE :
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL <input type="checkbox" id="checkAll_1"><div id="setBttn_1" style="display:none;"><input type="button" value="Set"></div></td>
<td>Check ALL <input type="checkbox" id="checkAll_2"><div id="setBttn_2" style="display:none;"><input type="button" value="Set"></div></td>
<td>Check ALL <input type="checkbox" id="checkAll_3"><div id="setBttn_3" style="display:none;"><input type="button" value="Set"></div></td>
</tr>
<tr>
<td><input type="checkbox" id="chkBox1" name="Box1" checked value="1" /></td>
<td><input type="checkbox" id="chkBox2" name="Box2" value="12"/></td>
<td><input type="checkbox" id="chkBox3" name="Box3" value="13"/></td>
<tr>
<td><input type="checkbox" id="chkBox10" name="Box1" checked value="001" /></td>
<td><input type="checkbox" id="chkBox20" name="Box2" value="182"/></td>
<td><input type="checkbox" id="chkBox30" name="Box3" value="123"/></td>
</tr>
<tr>
<td><input type="checkbox" id="chkBox11" name="Box1" value="333" /></td>
<td><input type="checkbox" id="chkBox181" name="Box2" value="184442"/></td>
<td><input type="checkbox" id="chkBox101" name="Box3" checked value="1243"/></td>
</tr>
</table>
</div>
jQuery :
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
$('[name="Box1"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_1').is(':checked')) {
$('#setBttn_1').show();
} else {
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function () {
$('[name="Box2"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_2').is(':checked')) {
$('#setBttn_2').show();
} else {
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function () {
$('[name="Box3"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_3').is(':checked')) {
$('#setBttn_3').show();
} else {
$('#setBttn_3').hide();
}
});
The current result is when I click Check All in the first column, it won't uncheck other check boxes. When I click Check All in the second column, the Set button in the first column won't hide. Is it possible to go back to the previously checked option(s) just before the current selection if I unclick "Check All"?
LIVE DEMO : http://jsfiddle.net/WzuMa/142/
The problem is that prop does not fire change (with good reason, as that could cause recursive events by default).
You can simply trigger the change() event after setting prop, but you need to ensure it does not fire recursively (so added a sentinel variable):
var processing = false;
$('input[type="checkbox"]').on('change', function() {
if (!processing) {
processing = true;
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
processing = false;
}
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/143/
Update - Restore previous values on uncheck
var processing = false;
var $checkboxes = $('input[type="checkbox"]');
$checkboxes.on('change', function() {
if (!processing) {
processing = true;
if (this.checked){
// Store all answers on a data attribute
$checkboxes.each(function(){
$(this).data('lastcheck', $(this).prop('checked'));
});
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
}
else {
// Restore all the previous checked box states
$checkboxes.not(this).each(function(){
$(this).prop('checked', $(this).data('lastcheck')).removeData('lastcheck');
});
}
processing = false;
}
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/144/
You can tweak this technique to operate on rows instead, for the lower checkboxes but I have to leave something for you to do :)
You you are programmatically setting the checked property it doesn't triggers the change event handler.
To trigger the event handler, .trigger(event) function should be used.
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function() {
$('[name="Box1"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_1').is(':checked')) {
$('#setBttn_1').show();
} else {
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function() {
$('[name="Box2"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_2').is(':checked')) {
$('#setBttn_2').show();
} else {
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function() {
$('[name="Box3"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_3').is(':checked')) {
$('#setBttn_3').show();
} else {
$('#setBttn_3').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL
<input type="checkbox" id="checkAll_1">
<div id="setBttn_1" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_2">
<div id="setBttn_2" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_3">
<div id="setBttn_3" style="display:none;">
<input type="button" value="Set">
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
</td>
<td>
<input type="checkbox" id="chkBox2" name="Box2" value="12" />
</td>
<td>
<input type="checkbox" id="chkBox3" name="Box3" value="13" />
</td>
<tr>
<td>
<input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
</td>
<td>
<input type="checkbox" id="chkBox20" name="Box2" value="182" />
</td>
<td>
<input type="checkbox" id="chkBox30" name="Box3" value="123" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox11" name="Box1" value="333" />
</td>
<td>
<input type="checkbox" id="chkBox181" name="Box2" value="184442" />
</td>
<td>
<input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
</td>
</tr>
</table>
</div>
You can use this:
$('#allCheckboxes').find('tr').first().find(':checkbox').on('change', function(e) {
var $this = $(this),
idx = $this.closest('td').index();
$('div[id^="setBttn"]').hide();
$this.next('div').toggle(this.checked);
$('[id^="checkAll"]:checked').not(this).prop('checked', !this.checked);
$('#allCheckboxes').find('tr').not(':first').each(function() {
$(this).find(':checkbox:checked').prop('checked', !$this.prop('checked'));
$(this).find('td').eq(idx).find(':checkbox').prop('checked', $this.prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL
<input type="checkbox" id="checkAll_1">
<div id="setBttn_1" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_2">
<div id="setBttn_2" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_3">
<div id="setBttn_3" style="display:none;">
<input type="button" value="Set">
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
</td>
<td>
<input type="checkbox" id="chkBox2" name="Box2" value="12" />
</td>
<td>
<input type="checkbox" id="chkBox3" name="Box3" value="13" />
</td>
<tr>
<td>
<input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
</td>
<td>
<input type="checkbox" id="chkBox20" name="Box2" value="182" />
</td>
<td>
<input type="checkbox" id="chkBox30" name="Box3" value="123" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox11" name="Box1" value="333" />
</td>
<td>
<input type="checkbox" id="chkBox181" name="Box2" value="184442" />
</td>
<td>
<input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
</td>
</tr>
</table>
</div>
Try below JS for now things are hard-coded but if this solution is as expected as you then I can update it to more dynamics
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
$('[name="Box1"]').prop('checked', $(this).prop("checked"));
$('[name="Box2"],[name="Box3"]').prop('checked', false);
if($('#checkAll_1').is(':checked')){
$('#setBttn_1').show();
$('#setBttn_2,#setBttn_3').hide();
}else{
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function () {
$('[name="Box2"]').prop('checked', $(this).prop("checked"));
$('[name="Box1"],[name="Box3"]').prop('checked', false);
if($('#checkAll_2').is(':checked')){
$('#setBttn_2').show();
$('#setBttn_1,#setBttn_3').hide();
}else{
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function () {
$('[name="Box3"]').prop('checked', $(this).prop("checked"));
$('[name="Box1"],[name="Box2"]').prop('checked', false);
if($('#checkAll_3').is(':checked')){
$('#setBttn_3').show();
$('#setBttn_1,#setBttn_2').hide();
}else{
$('#setBttn_3').hide();
}
});
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;
}
}
here is my test code to calculate a multi choice quiz.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple checkbox calculation</title>
<style>
div {
color: red;
font-size: 35px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("input[type=checkbox]:checked").each(
function() {
total += parseInt($(this).val());
});
$("#total").html("tatal:" + total);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col" width="50px">No:</th>
<th scope="col" width="40px">A</th>
<th scope="col" width="40px">B</th>
<th scope="col" width="40px">C</th>
<th scope="col" width="40px">D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared00" name="fieldMark[correct00]" value="1">
<label for="squared00" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared01" name="fieldMark[correct01]" value="-1">
<label for="squared01" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared02" name="fieldMark[correct02]" value="-1">
<label for="squared02" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared03" name="fieldMark[correct03]" value="-1">
<label for="squared03" class="css-label"></label>
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared10" name="fieldMark[correct10]" value="1">
<label for="squared10" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared11" name="fieldMark[correct11]" value="-1">
<label for="squared11" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared12" name="fieldMark[correct12]" value="-1">
<label for="squared12" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared13" name="fieldMark[correct13]" value="-1">
<label for="squared13" class="css-label"></label>
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared20" name="fieldMark[correct20]" value="1">
<label for="squared20" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared21" name="fieldMark[correct21]" value="-1">
<label for="squared21" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared22" name="fieldMark[correct22]" value="-1">
<label for="squared22" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared23" name="fieldMark[correct23]" value="-1">
<label for="squared23" class="css-label"></label>
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared30" name="fieldMark[correct30]" value="1">
<label for="squared30" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared31" name="fieldMark[correct31]" value="-1">
<label for="squared31" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared32" name="fieldMark[correct32]" value="-1">
<label for="squared32" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared33" name="fieldMark[correct33]" value="-1">
<label for="squared33" class="css-label"></label>
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared40" name="fieldMark[correct40]" value="1">
<label for="squared40" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared41" name="fieldMark[correct41]" value="-1">
<label for="squared41" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared42" name="fieldMark[correct42]" value="-1">
<label for="squared42" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared43" name="fieldMark[correct43]" value="-1">
<label for="squared43" class="css-label"></label>
</td>
</tr>
</tbody>
</table>
<div id="total"></div>
</body>
</html>
this code for auto calculation for multiple choice quiz. only option "A" is correct for each 5 question other all options is incorrect. here is my requirements.
when user clicks on only option "correct" for any question number it adds point 1 to the total.
when user clicks on only option "incorrect" for any question will add point -1 to the total.
when user clicks on both option "correct" and "incorrect" for any question number it adds point -1 to the total. for example user clicks all checkbox for question 1 it should add only -1 to the total (in example above it is -2 which is = 1-1-1-1.) ie. if a user checked all the checkbox in the above example it will get total:-10. But my requirement is to show only -5. ie = -1-1-1-1-1.
thanks in advance..
I have created a fiddle for you at http://jsfiddle.net/DYduY/ It isn't the nicest solution but what I do is calculate the total per row. If it is lower than -1 e.g. -2 than I change the row value to -1. In this way the maximal negative value for a row is -1.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (rowTotal < -1) { rowTotal = -1 }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});
Got it more improve solution. Here is the jquery code.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var checked = $(this).find( "input:checked").length;
var values = $(this).find( "input[type=checkbox]").map(function() {
return parseInt($(this).val());
}).get();
var minimum = Math.min.apply( this, values );
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (checked > 1) { rowTotal = minimum }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});