Check/uncheck checkboxes in TreeView using javascript

Question

Ana D. 0 Junior Poster in Training

16 Years Ago

Hi,

In my ASP.NET page I have a TreeView where ShowCheckBoxes="Leaf".
I want to mark as checked/unchecked all the visible checkboxes by clicking in a button.

My code for selecting all/none nodes is like this:

function selectAllNone(tvID, value) {
            var tvNodes = document.getElementById(tvID);
            var chBoxes = tvNodes.getElementByTagName("input");
            for (var i = 0; i < chBoxes.length; i++) {
                var chk = chkBox[i];
                if (chk.type == "checkbox") {
                    chk.cheked = value;
                }
            }        
        }

However, in the line var chBoxes = tvNodes.getElementByTagName("input");I'm having this error message: object doesn't support this property or method.
How do I checj/uncheck all the checkboxes, then?

Thanks,

Ana

.net javascript

4 Contributors
12 Replies
2K Views
11 Months Discussion Span
Latest Post 16 Years Ago Latest Post by ananthat

Dani AI

Generated 10 Months Ago

Good catch by on the plural API and by calling out the typos. Two extra tips to make this robust with ASP.NET TreeView: (1) scope your toggle to the TreeView’s rendered client ID so you do not touch unrelated checkboxes on the page, and (2) if you truly mean visible only, skip boxes that are hidden (collapsed nodes often remain in the DOM but are not visible). Also, for anyone reading later, there is no getElementsById as suggested by ; the DOM exposes getElementById (singular).

Here is a compact, modern approach that only affects visible, enabled checkboxes inside a specific TreeView:

<script>
function toggleTreeViewChecks(tvClientId, check) {
  var container = document.getElementById(tvClientId);
  if (!container) return false;

  var boxes = container.querySelectorAll('input[type=checkbox]');
  var apply = function(box){
    if (box.offsetParent !== null && !box.disabled) {
      box.checked = !!check;
    }
  };
  // Support NodeList in older browsers
  (boxes.forEach ? boxes.forEach(apply) : Array.prototype.forEach.call(boxes, apply));
  return false;
}
</script>

<button type="button" onclick="toggleTreeViewChecks('<%= TreeView1.ClientID %>', true)">Select all</button>
<button type="button" onclick="toggleTreeViewChecks('<%= TreeView1.ClientID %>', false)">Clear</button>

Notes:

'<%= TreeView1.ClientID %>' ensures you target the correct rendered ID, even inside naming containers.
offsetParent !== null is a simple visibility check so collapsed items are not toggled.
If you update the TreeView via UpdatePanel, rewire any external event handlers after partial postbacks using the MS AJAX hook:

<script>
Sys.Application.add_load(function () {
  // reattach handlers or re-run setup if needed
});
</script>

All 12 Replies

serkan sendur 821 Banned

16 Years Ago

i think that method is not getElementByTagName, but getElementsByTagName, so it is plural basically. try that way.

serkan sendur 821 Banned

16 Years Ago

here you go :

function Button1_onclick() {
var inputs = document.forms[0].elements;
for(var i=0;i< inputs.length;i++)
{
inputs[i].checked = true;
}
}

function Button2_onclick() {
var inputs = document.forms[0].elements;
for(var i=0;i< inputs.length;i++)
{
inputs[i].checked = false;
}
}

// ]]>
</script>

serkan sendur 821 Banned

16 Years Ago

working sample is attached to this post.

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

WebSite2.zip (1.94 KB)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

serkan sendur 821 Banned Featured Poster · Answer 1 · 2009-09-18T05:35:37+00:00

Just in case you cant run the attachment :
Default.aspx :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
var inputs = document.forms[0].elements;
for(var i=0;i< inputs.length;i++)
{
inputs[i].checked = true;
}
}

function Button2_onclick() {
var inputs = document.forms[0].elements;
for(var i=0;i< inputs.length;i++)
{
inputs[i].checked = false;
}
}

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<input id="Button1" type="button" value="Select All" onclick="Button1_onclick()" />
        <input id="Button2" type="button" value="Deselect All" onclick="return Button2_onclick()" /><br />
        <br />
        <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
            <Nodes>
                <asp:TreeNode Text="New Node" Value="New Node">
                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="New Node" Value="New Node">
                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="New Node" Value="New Node">
                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        &nbsp;</div>
    </form>
</body>
</html>

Ana D. 0 Junior Poster in Training · Answer 2 · 2009-09-18T20:07:39+00:00

Hi Serkan,

You were right: the method is getElementsByTagName. I just changed it and it's working.

Thanks =)

serkan sendur 821 Banned Featured Poster · Answer 3 · 2009-09-18T21:09:12+00:00

serkan sendur 821 Banned

16 Years Ago

Be generous to add to my reputation :)

Ana D. 0 Junior Poster in Training · Answer 4 · 2009-09-18T21:21:28+00:00

Ana D. 0 Junior Poster in Training

16 Years Ago

I tried to, but how can I do it?

serkan sendur 821 Banned Featured Poster · Answer 5 · 2009-09-18T22:13:37+00:00

in the beginning of each post there is a "add to serkan's reputation" link , you basically click on it and then select agree radio button then type something then click ok.

Ana D. 0 Junior Poster in Training · Answer 6 · 2009-09-18T22:19:17+00:00

Ana D. 0 Junior Poster in Training

16 Years Ago

Added =)

serkan sendur 821 Banned Featured Poster · Answer 7 · 2009-09-19T00:24:27+00:00

serkan sendur 821 Banned

16 Years Ago

Thanks :)

WhiteShadows 0 Newbie Poster · Answer 8 · 2010-03-13T16:18:02+00:00

Looks simple.
Change
var tvNodes = document.getElementById(tvID);
to
var tvNodes = document.getElementsById(tvID);

Hope It worked.Do tell Us.
Happy Coding.

Hi,
In my ASP.NET page I have a TreeView where ShowCheckBoxes="Leaf".
I want to mark as checked/unchecked all the visible checkboxes by clicking in a button.
My code for selecting all/none nodes is like this:
function selectAllNone(tvID, value) {
            var tvNodes = document.getElementById(tvID);
            var chBoxes = tvNodes.getElementByTagName("input");
            for (var i = 0; i < chBoxes.length; i++) {
                var chk = chkBox[i];
                if (chk.type == "checkbox") {
                    chk.cheked = value;
                }
            }        
        }
However, in the line var chBoxes = tvNodes.getElementByTagName("input");I'm having this error message: object doesn't support this property or method.
How do I checj/uncheck all the checkboxes, then?
Thanks,
Ana

ananthat 0 Newbie Poster · Answer 9 · 2010-09-08T22:09:09+00:00

Hi,

Just use the below code. The first one have lot of spelling mistakes.

function selectAllNone(value) {
            var tvNodes = document.getElementById("trvMenu");
            var chBoxes = tvNodes.getElementsByTagName("input");
            for (var i = 0; i < chBoxes.length; i++) {
                var chk = chBoxes[i];
                if (chk.type == "checkbox") {
                    chk.checked = value;
                }
            }
            return false;
        }

Thanks and Regards,

Ananth N

Check/uncheck checkboxes in TreeView using javascript

Dani AI

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers