Develop Reference

JQuery radio button hierarchical element hiding

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

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

How to make reset/clear radio button JS but except 1 radio

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>

how to make checkbox unchecked when other checkbox is checked in angular

I have a table where it shows the list of deleted items.
User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.
$(function() {
$('input.example').on('change', function() {
$("tr").closest('input.example').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
<table>
<th>
<label>
<input type="checkbox" class="example" />Recover</label>
<label>
<input type="checkbox" class="example" />Delete</label>
</th>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
</table>
</div>

This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:
<div ng-app>
<table>
<th>
<label><input type="radio" name="foo1" />Recover</label>
</th>
<th>
<label><input type="radio" name="foo1" />Delete</label>
</th>
<tr>
<td>
<input type="radio" name="foo2" />
</td>
<td>
<input type="radio" name="foo2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="foo3" />
</td>
<td>
<input type="radio" name="foo3" />
</td>
</tr>
</table>
</div>

i figured it out myself without using radio buttons and its working fine.
JS code
$scope.uncheckPermDelete = function (ip) {
if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
ip.perm_delete = 0;
}
};
$scope.uncheckRecover= function (ip) {
if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
ip.deleted = 1;
}
};
HTML code
<td ><input class="recover_check" name="recover_check_{{ip.id}}" ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>

Limiting user for number of checkboxes to checked

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

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

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

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

jQuery - Unchecked other checkbox when CHECK ALL is checked

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();
}
});