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>

PHP- Select all based on checkbox

So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>

You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days

Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>

Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>

How can I get hidden value by checkbox value from under the same <td> tag

I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.

Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>

Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});

You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});

How can I create checkbox validation that only allows a user to Select a checkbox if a previous checkbox is selected?

// What I want to do is allow the user to select many checkboxes. In order to make a booking the user must select atleast one seat number checkbox(this checkbox has to be one or many of the seat number checkboxes). They can also select child,wheelchair or special diet, but in order to do so, the checkbox that belongs to the corresponding seat number must be checked. If it isnt a validation or popup must occur stating that the seat number must be checked. Meaning that if a user wants to check either special diet, wheelchair or child the seat number must be checked. If the user clicks the submit button without any checkboxes selected than a validation should occur or popup stating that atleast one checkbox must be selected.THis is my current page layout
this is my nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
p{
font-size: 16px;
}
</style>
<body>
<?php
// Start the session
session_start();
?>
<?php
$str = $_GET['Confirm'];
$array = (explode(",",$str));
?>
<h1>Booking Details</h1>
Flight Details:
<table>
<tr>
<td> Route_no
</td>
<td><?php echo $array[0] ?>
</td>
</tr>
<tr>
<td>
To_city</td>
<td> <?php echo $array[1] ?>
</td>
</tr>
<tr>
<td>
From_city</td>
<td> <?php echo $array[2] ?>
</td>
</tr>
<tr>
<td>
Price</td>
<td> $<?php echo $array[3] ?>
</td>
</tr>
</table>
<?php
// Set session variables
$_SESSION["route_no"] = $array[0];
$_SESSION["to_city"] = $array[1];
$_SESSION["from_city"] = $array[2];
$_SESSION["price"] = $array[3];
echo "Session variables for this booking have been set.";
?>
<form action="Yourbookings.php" method="get">
<table>
<tr>
<td>Seat #</td>
<td>Child </td>
<td>WheelChair</td>
<td>Special Diet</td>
</tr>
<tr>
<td>Seat 1 <input type="checkbox" name="seat1" value="2"> </td>
<td> <input type="checkbox" name="Child" value="Child1"> </td>
<td> <input type="checkbox" name="WheelChair" value="WheelChair1"> </td>
<td> <input type="checkbox" name="Special Diet" value="SpecialDiet1"> </td>
</tr>
<tr>
<td>Seat 2 <input type="checkbox" name="seat2" value="1"> </td>
<td> <input type="checkbox" name="Child2" value="Child2"> </td>
<td> <input type="checkbox" name="WheelChair2" value="WheelChair2"> </td>
<td> <input type="checkbox" name="Special Diet2" value="SpecialDiet2"> </td>
</tr>
<tr>
<td>Seat 3 <input type="checkbox" name="seat3" value="seat3"> </td>
<td> <input type="checkbox" name="Child3" value="Child3"> </td>
<td> <input type="checkbox" name="WheelChair3" value="WheelChair3"> </td>
<td> <input type="checkbox" name="Special Diet3" value="SpecialDiet3"> </td>
</tr>
<tr>
<td>Seat 4 <input type="checkbox" name="seat4" value="seat4"> </td>
<td> <input type="checkbox" name="Child4" value="Child14"> </td>
<td> <input type="checkbox" name="WheelChair4" value="WheelChair4"> </td>
<td> <input type="checkbox" name="Special Diet4" value="SpecialDiet4"> </td>
</tr>
<tr>
<td>Seat 5 <input type="checkbox" name="seat5" value="seat5"> </td>
<td> <input type="checkbox" name="Child5" value="Child5"> </td>
<td> <input type="checkbox" name="WheelChair5" value="WheelChair5"> </td>
<td> <input type="checkbox" name="Special Diet5" value="SpecialDiet5"> </td>
</tr>
</table>
<?php
$_SESSION["price"] = $array[3];
?>
Total = $variable??
<input type="submit" name="Add booking" value="Add_booking">
</form>
</body>
</head>
</html>

In my opinion, forget about all the alerts and such, just use arrayed check box keys:
<tr>
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[child]" value="1"></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[child]" value="1"></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[child]" value="1"></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[child]" value="1"></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1"></td>
</tr>
Upon submission your array will look like this:
Array
(
[seat1] => Array
(
[child] => 1
[wheelchair] => 1
)
[seat2] => Array
(
[wheelchair] => 1
)
[seat3] => Array
(
[wheelchair] => 1
[specialdiet] => 1
)
[seat4] => Array
(
[child] => 1
[wheelchair] => 1
[specialdiet] => 1
)
[Add_booking] => Add_booking
)
EDIT:
Based on your clarification, you need some javascript (jQuery):
Demo:
https://jsfiddle.net/9e9embjt/
JavaScript:
$(document).ready(function(){
$(this).on('click',".seat_selector",function() {
var thisBtn = $(this);
var isChk = thisBtn.is(":checked");
var thisWrap = thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
if(isChk)
thisWrap.attr("disabled",false);
else {
thisWrap.attr("disabled",true);
thisBtn.attr("disabled",false);
}
var allSeats = $(".seat_selector");
var disable = true;
$.each(allSeats, function(k,v) {
if($(v).is(":checked")) {
disable = false;
return false;
}
});
$("#submitter").attr('disabled',disable);
});
});
HTML:
<table>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />

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