We Keep Coding

JQuery autofill table row with corresponding text selection?

My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>

This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)

I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/

How to get the position of the checked checkbox in a table

I have a table with bunch of checkboxes in each row. How can I find position of the checked box e.g. 1A or 1B when both or one of the checkboxes is checked in first row. The page I am trying to modify, dynamically makes the table based on two factors for the rows and columns. SO I just need to grab the rowname and colname in order to program further. e.g. 10(A) if the name of first row was '10'.
<table id="mytable">
<tr>
<td> </td>
<td align="center"> A </td>
<td align="center"> B </td>
</tr>
<tr>
<td> 1 </td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td> 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<tr> <button id="save">Click</button> </tr>

This will get the column and row of a checked input, and it gets the column letter and row number through calls to document.querySelector, using CSS3 first-child and nth-child selectors based on the column and row:
document.getElementById('mytable').addEventListener('click', function(e) {
if(e.target.tagName === 'INPUT') {
var td= e.target.parentNode, //the input's td parent
tr= td.parentNode, //the td's tr parent
col= td.cellIndex, //the input's column
row= tr.rowIndex, //the input's row
header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
document.getElementById('output').textContent= number+header;
}
});
<table id="mytable">
<tr>
<td></td>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<div id="output"></div>

try this # plain javascript:
var checkboxes = [];
for(var i =0; i<document.getElementsByTagName("input").length;i++) {
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)}
}
checkboxes is an array of checked checkboxes - e.g. [0,2] if the first and the 3rd checkboxes are checked

or like this:
https://jsfiddle.net/zLy90w40/1/
function getCheckBox(){
var oneA = document.getElementById('1a');
var oneB = document.getElementById('1b');
var twoA = document.getElementById('2a');
var twoB = document.getElementById('2b');
if (oneA.checked){
alert("1 A was checked") ;
}
if(oneB.checked){
alert("1 B was checked") ;
}
if(twoA.checked){
alert("2 A was checked") ;
}
if(twoB.checked){
alert("2 B was checked") ;
}
}

Find the value of id column if checkbox is checked on the basis of column name id

I have to find the value of id column whose check box is checked in same row on the basis of column name because id column position is not fixed. It can be first,last or middle in the table. I have applied the following code:
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th>ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car"> </td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
</table>
My jquery is:
$("input[name='vehicle']").click(function() {
alert("djb");
if ($(this).is(':checked')) {
alert("dj");
if ($(this).closest('table').next('tr').find('th:contains(Jan 3)') == 'true') {
alert("bhh");
} else {
alert("cbjhj");
}
}
});
Please help to find the id value whose checkbox is checked. I am new to jquery, javascript.

I'd suggest the following approach:
// binding a change event-handler to <input type="checkbox" /> elements:
$('input[type=checkbox]').change(function() {
// assuming you want this to run only when the checkbox is checked:
if (this.checked) {
// find the <th> elements:
var ID = $('th').filter(function() {
// find those <th> elements whose trimmed-text is exactly 'ID':
return $.trim($(this).text()) === 'ID';
// get the cellIndex property of that element (or the first matched element):
}).prop('cellIndex'),
// find the closest <tr> element from the checked <input />:
IDVal = $(this).closest('tr')
// find the descendant <td> elements:
.find('td')
// find the <td> with the same cellIndex as the <th>
.eq(ID)
// retrieve the text:
.text();
console.log(IDVal);
}
});
$('input[type=checkbox]').change(function() {
if (this.checked) {
var ID = $('th').filter(function() {
return $.trim($(this).text()) === 'ID';
}).prop('cellIndex'),
IDVal = $(this).closest('tr').find('td').eq(ID).text();
console.log(IDVal);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th>ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car">
</td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
</table>
If, however, you use a class-name to identify which cells contains the 'id' associated value, such as <td class="id"></td>, this all becomes much simpler:
$('input[type=checkbox]').on('change', function() {
if (this.checked) {
// find the closest <tr> element from the :checked <input />:
var idValue = $(this).closest('tr')
// find the element with the class of 'id':
.find('.id')
// retrieve the text of that element:
.text();
console.log(idValue);
}
});
$('input[type=checkbox]').on('change', function() {
if (this.checked) {
var idValue = $(this).closest('tr').find('.id').text();
console.log(idValue);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th class="id">ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td class="id">col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car">
</td>
<td>col 2, row 2</td>
<td class="id">col 3, row 2</td>
</tr>
</table>
References:
JavaScript:
cellIndex.
jQuery:
closest().
eq().
filter().
find().
jQuery.trim().
on().
prop().

I hope this helps. Please see demo.
based on what I understand from this, Please help to find the id value whose checkbox is checked.
$(document).ready(function(){
$(":checkbox").click(function(){
alert( $(this).val() );
});
});
http://jsfiddle.net/silkherb/tx2asmg6/2/

Add IDs to the checkboxes id="first" and id="second" to grab the elements:
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" id="first"></td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>`enter code here`
<tr>
<td><input type="checkbox" name="vehicle" value="Car" id="second"> </td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
Afterwards, you can use a simple javascript. .checked checks whether the checkbox is marked.
if(document.getElementById("first").checked == true){
console.log("do something here 1");
}
if(document.getElementById("second").checked == true){
console.log("do something here 2");
}

show / hide table columns using jQuery

I have a table with five columns
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
and I have some check boxes each one for one column when the first checkbox is checked
then I need to show the first column , if unchecked I need to hide first column. Like that
I need to do for all columns.
I found some answers but I did not find any solution .First time it is hiding then other
operations are not working on that.
$('#tableId td:nth-child(column number)').hide();
Please help me .Thanks in advance....

Here you go, full solution:
http://jsfiddle.net/vXBtP/
and updated here: http://jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});

Depending on the column # you wanna hide, use this stolen one liner:
$('td:nth-child(2)').hide();
if you use th
$('td:nth-child(2),th:nth-child(2)').hide();

If I got what you mean, you can make it real simple using tr th, tr td and nth-child selector. You can go based on index, but you'll need to add 1 as nth-child is not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing tr before td:nth is very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.
See WORKING jsFIDDLE of YOUR Example
FYI: If you want something "cleaner" looking, (like on the turbotax site) dont hide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside p or div tags inside each cell. Then change you column selector to grab each cell's inner element and hide that instead.
See Example of this Alternate way here!
HTML
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
JavaScript
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})

You can get the header index of table and make the table header and td elements hidden. Something like this Suppose the index of table header is index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();

Like this?
Lashed together quickly but should work.
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});

$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
JS FIDDLE LINK

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">Bill#devcurry.com</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">laura#devcurry.com</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">ram#devcurry.com</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>

You can add an "id" on your "th" element and simply call:
$('#yourId').hide();
here is the code I've utilized :
$(document).on('click', '.form-check-input', function(e){
var finition_checked = $('#finition_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
if (finition_checked && size_checked.length === 0){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_size').hide();
};
if (finition_checked.length === 0 && size_checked){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_finition').hide();
};
if(size_checked && finition_checked){
$('#price-container').hide();
$('.table-responsive').show();
}
if(size_checked.length === 0 && finition_checked.length === 0){
$('#price-container').show();
$('.table-responsive').hide();
};
console.log(finition_checked, size_checked)
var unique_value = [];
var finition = [];
var size = [];
//more logic to come
});

Handling checkboxes in groups using Jquery or Javascript

I have an HTML document that is generated on the server side using JSP. The output that is produced lists a number of records as HTML. Each record contains a single master record and each master record is associated with several child records.
The master record is displayed in one row with a small icon next to the record id. When clicked, the record expands and the child records are displayed (i.e a DIV layer is made visible). Here is an example HTML output of the HTML.
<!-- Record 1 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=352></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=43></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=44></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=45></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=46></td>
</tr>
</table>
</td>
</tr>
<!-- Record 2 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=353></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=53></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=54></td>
</tr>
</table>
</td>
</tr>
Next to each record (master or child), there is a checkbox. When the master record's checkbox is checked, all related child records for that specific group of child records are also checked. This is done using old school javascript by just going through all elements and looking at the values and checking them if they are related to the master record.
There is an onClick event on each master record checkbox. When clicked (i.e. when the master record is checked) i pass the child records to the javascript function. This is passed using Document.theForm.child. This passes all the child records as an array. I also pass the number of records associated with the master record clicked. And i also pass the value of the first child record.
Inside the javascript function i just go through the array of child records until i get to the one which matches the value i passed into the function which matches the first child record. I then use the number of child records to set the next n records to checked.
I know need to now modify this so that if all child records (related to a specific master record) are unchecked, the master record should also be unchecked. I want to modify the whole thing to use Jquery but without modifying the names and values of the checkboxes. I am not very familiar with Jquery so any guidance will be appreciated.
Thanks
Edit
What i want to do is to change it so that i can do to things.
When the checkbox for the master row is selected all children are selected
When the checkbox for teh master row is unselected all childrean are unselected
When any checkbox is unselected, a check is carried out to check that there is at least one child row selected otherwise the master row is unselected.
To do this, i will add a class element to each child row. The value of the class will be the value of the master row checkbox. I can then add an onClick event on the master checkbox passing the value. I would use that value to check/uncheck any checkbox with that value.
Each group of checkboxes will have a different class value depending on the master row. I have seen a couple of Jquery examples but i cant find examples of how to check/uncheck checkboxes based on values/id passed to a function. Here is an example i am working on now
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall2"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall3"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall4"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
</table>
</BODY>
</HTML>
The example has 4 groups of records. Each master checkbox has an id which is the value used for each child as the 'class' value. How can i change each of the master checkboxes to include an onClick event which passes the id of the checkbox that was clicked. This Id is then used on the Jquery function to check any checkbox with a class value that matches the passed id. (similar for unchecking as well).
Thanks

EDIT:
New Requirements: http://jsfiddle.net/mdJQc/2/
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = !! table.find('input:checked').length,
isMaster = !master.length;
if (!isEmpty) master.attr('checked', false);
if (isMaster) {
$(this).closest('tr').next('tr').find('input').attr('checked', $(this).is(':checked'))
}
})
You said you already have the check all code, so I just implemented the empty check:
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = ! table.find('input:checked').length;
if (isEmpty) master.attr('checked', false);
})
Example