Question:

How to Select checkboxes on an HTML treeview with JavaScript?

Problem

I'm currently developing an ASP.Net core web app with HTML and JavaScript. The problem is that I'm trying to implement a treeview where each element is a checkbox, and when I click an element I want the child elements to be also selected. You can see an example below: Example

And here is the code:

@using ProvaFormularis.Assets.TVItems;

@model IEnumerable

ViewData["Title"] = "Privacy Policy";

}

@ViewData["Title"]

@foreach (TVStandard tvstandard in StaticClass.TVList.StandardsList)

{

                @tvstandard.Name (@tvstandard.folderName)
-                             @tvsection.Name (@tvsection.scriptName)
  -                                         @tvmode.Name
    -                                                     @tvfreq.Name (@tvfreq.ID)

}

So, does anybody know how to correctly implement this behavior?

Please note that the first script is the one that deploys the child elements and the second one is the one that must select the child elements and does not work.

PD: I've tested the correct retrieval of click event and the click action of the checkboxes and it works fine. I've done that with these scripts:

Solution

In your second script, you have a syntax error in the for loop. It should be for (j = 0; j < lis.length; j++) instead of for (j = 0; j < lis.length).

Instead of using .getElementsByClassName(), you should use .querySelectorAll() to select elements by class name.

When you use lis.getElementsByClassName("checker"), it will return an HTMLCollection, so you'll need to iterate through it.

var toggler = document.getElementsByClassName("checker");

var i;

for (i = 0; i < toggler.length; i++) {

toggler[i].addEventListener("click", function () {

var lis = this.parentElement.querySelector(".nested").children;

var j;

for (j = 0; j < lis.length; j++) {

var toggler2 = lis[j].querySelectorAll(".checker");

var k;

for (k = 0; k < toggler2.length; k++) {

toggler2[k].checked = this.checked;

}

});

}

>Why highlighted table row using class not working in JavaScript?

>How to rename an object key based on the condition in JavaScript?

>How to sort an array based on another array in Javascript?

>Javascript: Modal not closing with a button

JavaScript

Nisha Patel

Your Answer

Submit

@ViewData["Title"]

Nisha Patel

0 Answers

Top Questions

@ViewData["Title"]

Nisha Patel

0 Answers

Top Questions

Related Questions