I have a doubt about my application. I have created an xml tree using jquery and I have a checkbox on my tree view. For that when I tick my parent node then the entire sub child also get ticked and this is okay When i untick my parent node then the entire sub child also unticked and this is also okay But when I do 1. and then I untick all the subchilds then I want my parent node also untick automatically, but this is not happen in my code Let me know if i have done anything wrong. Here is my code:
HTML <div> <style type="text/css"> ul { margin-left: 0px; list-style: none; padding-left: 40px; margin-left: -20px; padding: 0 0 0 16px; margin: 0; } li { margin: 0; padding: 0px 0 5px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>'); var sHTML = drawTreeFromXml(xmlData); document.getElementById("tree").innerHTML = sHTML; }); function drawTreeFromXml(xmlData) { var html = ""; var properties = xmlData.getElementsByTagName("properties"); html += "" $(properties).each(function () { var department = $(this); var CustomerID = $(department).find("CustomerID").text(); html += "<ul>"; html += "<li><input type='checkbox'/><a href='javascript:;'>" + CustomerID + "</a>"; html += "<ul>"; var CompanyName = $(department).find("CompanyName").text(); html += createElement(CompanyName); var ContactName = $(department).find("ContactName").text(); html += createElement(ContactName); var ContactTitle = $(department).find("ContactTitle").text(); html += createElement(ContactTitle); var Address = $(department).find("Address").text(); html += createElement(Address); var City = $(department).find("City").text(); html += createElement(City); var PostalCode = $(department).find("PostalCode").text(); html += createElement(PostalCode); var Country = $(department).find("Country").text(); html += createElement(Country); var Phone = $(department).find("Phone").text(); html += createElement(Country); var Fax = $(department).find("Fax").text(); html += createElement(Fax); html += "</ul></li></ul>"; }); return html; } function createElement(ElementValue) { return "<li><input type='checkbox'/><a href='javascript:;'>" + ElementValue + "</a></li>"; } $("#tree input:checkbox").live('change', function () { if ($(this).nextAll('ul').length == 0) { if ($(this)[0].checked == false) { $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', false); } else { if ($(this).closest('ul').parent().find('input:checkbox:checked').length == $(this).closest('ul').parent().find('input:checkbox').length - 1) { $(this).closest('ul').parent().find('input:checkbox').eq(0).attr('checked', true); } } } else { if ($(this)[0].checked == true) { $(this).nextAll('ul').find('input:checkbox').attr('checked', true); } else { $(this).nextAll('ul').find('input:checkbox').attr('checked', false); } } }); $('#tree a').live('click', function () { if ($(this).nextAll('ul').length != 0) { if ($(this).nextAll('ul').is(':visible')) { $(this).nextAll('ul').hide(); } else { $(this).nextAll('ul').show(); } } }); function readXml(xmlFile) { var xmlDoc; if (typeof window.DOMParser != "undefined") { xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", xmlFile, false); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); } xmlhttp.send(); xmlDoc = xmlhttp.responseXML; } else { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load(xmlFile); } return xmlDoc; } </script> <div id="tree"> </div> </div>
XMLFILE.xml: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <feed> <entry> <content> <properties> <CustomerID>ALFKI</CustomerID> <CompanyName>Alfreds Futterkiste</CompanyName> <ContactName>Maria Anders</ContactName> <ContactTitle>Sales Representative</ContactTitle> <Address>Obere Str. 57</Address> <City>Berlin</City> <PostalCode>12209</PostalCode> <Country>Germany</Country> <Phone>030-0074321</Phone> <Fax>030-0076545</Fax> </properties> </content> </entry> <entry> <content> <properties> <CustomerID>ANATR</CustomerID> <CompanyName>Ana Trujillo Emparedados y helados</CompanyName> <ContactName>Ana Trujillo</ContactName> <ContactTitle>Owner</ContactTitle> <Address>Avda. de la Constitución 2222</Address> <City>México D.F.</City> <PostalCode>05021</PostalCode> <Country>Mexico</Country> <Phone>(5) 555-4729</Phone> <Fax>(5) 555-3745</Fax> </properties> </content> </entry> </feed>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)