Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hello,
 
THE SCENARIO:
 
I have a search based on checkboxes which until now was static, meaning all the checkboxes were shown when the page was loading. I made some changes like when the page loads, the children checkboxes are not visible. it shows only the parent (District). the picture for a better understanding:
 
http://www.freeimagehosting.net/l9i85[^]
 
I succeed to create with my few knowledge of javascript to hide and show the children checkboxes (Area 1, Category 1 etc). picture:
 
http://www.freeimagehosting.net/mrisf[^]
 
What i need is when you check the District checkbox is to display just Area 1 Area 2, Area 3 etc., unchecked. Can someone show me? i am not so good at javascript. Picture:
Here is the link with the view for what i must accomplish
 
http://www.freeimagehosting.net/muddz[^]
 
And here is the javascript code:
 
function updateByDistrict(current) {
//If current is unchecked => uncheck all child checkboxes
if (current.attr("checked") == null || current.attr("checked") == "") 
    var checkBox0 = $j(".district ul li input[value^='" + current.val() + "']:checked").removeAttr("checked");
    $j(checkBox0).parent().hide();
    current.blur();
    $j("#searchFilter .district>input:checkbox:checked").each(function (i, item) {
        var checkBoxa = $j(".district ul li input[value^='" + $j(item).val() + "']:not(:checked)");
        $j(checkBoxa).parent().show();
        $j(checkBoxa).attr("checked", "checked");
    });
 
//Uncheck all-checkbox if there are any unchecked, otherwise check all-checkbox
$j("#searchFilter #areas .all").attr("checked",
        $j("#searchFilter #areas input:checkbox[class!='all']:checked").length > 0 ? '' : 'checked');
 
$j(".premise").showItem();
}
 
function updateByArea(current) {
//If current is unchecked => uncheck all child checkboxes
if (current.attr("checked") == null || current.attr("checked") == "")
    var checkBox1 = $j(".area ul li input[value^='" + current.val() + "']:checked").removeAttr("checked"); //checkbox
$j(checkBox1).parent().hide();
    $j("#searchFilter .area>input:checkbox:checked").each(function (i, item) {
        var checkBox = $j(".area ul li input[value^='" + $j(item).val() + "']:not(:checked)");
        $j(checkBox).parent().show();
        $j(checkBox).attr("checked", "checked");
    });
 
var districtNode = current.parents(".district");
 
//Check district(Län) if all child checkboxes are checked
districtNode.children("input:checkbox").attr("checked", 
        districtNode.find("input:checkbox:not(:checked)").length == 0 ? "checked" : "");
 

//Uncheck all-checkbox if there are any unchecked, otherwise check all-checkbox
$j("#searchFilter #areas .all").attr("checked",
            $j("#searchFilter #areas input:checkbox[class!='all']:checked").length > 0 ? '' : 'checked');
 
$j(".premise").showItem();
}
 
And here is the ASP.NET code:
 
<ItemTemplate>
<li class="district">
<input type="checkbox" value="<%#CurrentLocationName%>" />
<label><%#CurrentLocationName%></label>
<asp:Repeater ID="Repeater1" runat="server" DataSource="<%# GetSecondAreas(CurrentLocationName) %>">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li class="area">
<input type="checkbox" class="category" value="<%# string.Concat(CurrentLocation.Area1,"| ", CurrentLocation.Area2)%>" />
<label>
<%#CurrentLocation.Area2%>
</label>
<asp:Repeater ID="Repeater2" runat="server" DataSource="<%# GetThirdAreas(CurrentLocation.Area2) %>">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<input type="checkbox" class="category" value="<%#string.Concat(CurrentLocation.Area1,"| ", CurrentLocation.Area2,"| ",CurrentLocation.Area3)%>" />
<label>
<%#CurrentLocation.Area3%>
</label>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
 
Thank you in advance
Posted 27-Sep-12 21:02pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 28 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid