JavaScript to check all checkboxes

This site is best viewed in a modern browser with JavaScript enabled.

bczm8703

hi.. i seems to have problem implementing a javascript function to select/deselect all checkboxes in the list.. when the All checkbox is being checked, nothing seems to be happening.

Javascript Code

function toggle(source) {
    checkboxes = document.getElementsByName('chbBUList');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
    }
}

Tags use in my page:

  <script src="script/script.js" type="text/javascript"></script>

...


 <asp:CheckBox ID="chbAllBU" runat="server" onClientClick="toggle(this);" Text="All" />
                                <asp:CheckBoxList ID="chbBUList" runat="server" RepeatLayout="Table" RepeatColumns="4"></asp:CheckBoxList>

if i change onClientClick="toggle(this); in to this onClick="toggle(this);
an runtime error stating function toggle(this) is undefined..

ShrineDesigns

I'm not at all familiar with ASP scripting. But switching ID="chbBUList" to name="chbBUList" should fix the issue. document.getElementsByName() uses the name attribute instead of the id attribute.

webdev_monkey

If your javascript code you are using getElementsByName, but you don't seem to give the checkboxes a name - this shoud fix the problem.

webdev_monkey
www.online-webdev-tools.com

bczm8703

i tried to add a name attribute to my checkboxlist but it seems to be not working.. when the all checkbox is checked, nothing happen.. i cant remove the ID as the backend C# code is using this ID for insert the data into sql server.. i try change the javascript to getElementById.. it also does not seems to work... nothing happen when the checkbox was click... by the way, the chbBUList was populated via sql server data... does this affect anything like the length in the for loop?

Error404

Since you asked for JavaScript and I don't know ASP, here's a solution.

If there are no other checkboxes on the page and they're contained in some other element (i.e. checkDiv), try this. If there are others, then you'll need to modify it a bit.

var count = getElementById("checkDiv").children.length;
for(var i = 0; i < count; i++) {
   var check = document.getElementsByTagName("input")[i].getAttributeNode("type");
   if(check == "checkBox") {
       // select or de-select them here
   }
}