Checkboxes inside the Table Cells

[avanti]

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

 

[Cah Sableng]

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

 

[RobG]

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;
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.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>