By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,463 Members | 3,115 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,463 IT Pros & Developers. It's quick & easy.

Checkboxes inside the Table Cells

P: n/a
Hi,

I add rows to my table dynamically, with a checkbox in each row in the
first column. The checkbox in the header row acts as a 'Select All'
checkbox. Whenever it is checked, checkboxes in all the rows get
checked. I tried this with changing the innerXML of the cell - but it
is not a very elegant solution.

What would be the best way to do this?

Thanks,
Avanti

Apr 19 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On Apr 20, 2:39 am, avanti <ava...@gmail.comwrote:
I add rows to my table dynamically, with a checkbox in each row in the
first column. The checkbox in the header row acts as a 'Select All'
checkbox. Whenever it is checked, checkboxes in all the rows get
checked. I tried this with changing the innerXML of the cell - but it
is not a very elegant solution.
I don't think mine is the best way, but here it is.
Change the checked property of checkbox in each row with the 'Select
All' checkbox's checked value.

function checkAll(elm) {
var cb=elm.form.getElementsByTagName('input');
var x=cb.length;
while (x--)
if (cb[x].type=='checkbox'&&cb[x].name!='selectAllCheckbox')
cb[x].checked=elm.checked;
}

<input type="checkbox" name="selectAllCheckbox"
onclick="checkAll(this);">

HTH

Apr 20 '07 #2

P: n/a
On Apr 20, 5:39 am, avanti <ava...@gmail.comwrote:
Hi,

I add rows to my table dynamically, with a checkbox in each row in the
first column. The checkbox in the header row acts as a 'Select All'
checkbox. Whenever it is checked, checkboxes in all the rows get
checked. I tried this with changing the innerXML of the cell - but it
is not a very elegant solution.
No, it's not. innerXML? Or do you mean Microsoft's proprietary
InnerXml?
>
What would be the best way to do this?
You could start with something like:

<script type="text/javascript">

var util = {};

util.getCheckboxes = function(el){
var elements = el.getElementsByTagName('input');
var t;
var checkboxes = [];
for (var i=0, len=elements.length; i<len; i++){
t = elements[i];
if ('checkbox' == t.type){
checkboxes.push(t);
}
}
return checkboxes;
}

util.checkall = function(el){
var cbs = util.getCheckboxes(el.form);
var checked = el.checked;
var i = cbs.length;
while(i--){
cbs[i].checked = checked;
}
}

</script>

<form action="">
<table>
<tr>
<td><input type="checkbox" onclick="util.checkall(this);">
<td>Check/uncheck all
<tr><td><input type="checkbox"><td>cb0
<tr><td><input type="checkbox"><td>cb1
<tr><td><input type="checkbox"><td>cb2
<tr><td><input type="checkbox"><td>cb3
</table>
</form>
--
Rob

Apr 20 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.