Search filter based on checkboxes
<p>THE SCENARIO:</p>

<p>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:</p>

<p><a href="http://www.freeimagehosting.net/l9i85" rel="nofollow">Initial view when page loads</a></p>

<p>I succeed to create with my few knowledge of javascript to hide and show the children checkboxes (Area 1, Category 1 etc). picture:</p>

<p><a href="http://www.freeimagehosting.net/mrisf" rel="nofollow">This is what I succeed</a></p>

<p>THE QUESTION:</p>

<p>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:</p>

<p>Here is the link with the view for what i must accomplish</p>

<pre><code>http://www.freeimagehosting.net/muddz
</code></pre>

<p>And here is the javascript code:</p>

<pre><code>function updateByDistrict(current) {
//If current is unchecked =&gt; 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&gt;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 &gt; 0 ? '' : 'checked');

$j(".premise").showItem();
}

function updateByArea(current) {
//If current is unchecked =&gt; 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&gt;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 &gt; 0 ? '' : 'checked');

$j(".premise").showItem();
}
</code></pre>

<p>And here is the ASP.NET code:</p>

<pre><code>&lt;ItemTemplate&gt;
&lt;li class="district"&gt;
&lt;input type="checkbox" value="&lt;%#CurrentLocationName%&gt;" /&gt;
&lt;label&gt;&lt;%#CurrentLocationName%&gt;&lt;/label&gt;
&lt;asp:Repeater ID="Repeater1" runat="server" DataSource="&lt;%# GetSecondAreas(CurrentLocationName) %&gt;"&gt;
&lt;HeaderTemplate&gt;
&lt;ul&gt;
&lt;/HeaderTemplate&gt;
&lt;ItemTemplate&gt;
&lt;li class="area"&gt;
&lt;input type="checkbox" class="category" value="&lt;%# string.Concat(CurrentLocation.Area1,"| ", CurrentLocation.Area2)%&gt;" /&gt;
&lt;label&gt;
&lt;%#CurrentLocation.Area2%&gt;
&lt;/label&gt;
&lt;asp:Repeater ID="Repeater2" runat="server" DataSource="&lt;%# GetThirdAreas(CurrentLocation.Area2) %&gt;"&gt;
&lt;HeaderTemplate&gt;
&lt;ul&gt;
&lt;/HeaderTemplate&gt;
&lt;ItemTemplate&gt;
&lt;li&gt;
&lt;input type="checkbox" class="category" value="&lt;%#string.Concat(CurrentLocation.Area1,"| ", CurrentLocation.Area2,"| ", CurrentLocation.Area3)%&gt;" /&gt;
&lt;label&gt;
&lt;%#CurrentLocation.Area3%&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;/ItemTemplate&gt;
&lt;FooterTemplate&gt;
&lt;/ul&gt;
&lt;/FooterTemplate&gt;
&lt;/asp:Repeater&gt;
&lt;/li&gt;
&lt;/ItemTemplate&gt;
&lt;FooterTemplate&gt;
&lt;/ul&gt;
&lt;/FooterTemplate&gt;
&lt;/asp:Repeater&gt;
&lt;/li&gt;
&lt;/ItemTemplate&gt;
</code></pre>

<p>Thank you in advance</p>
