ASP.net Checkbox Pairs

Question

I have a page that renders two panels that display the same data differently using a repeater, differently. I then have a javascript function that toggles between the two views. I want each data item in each view to have a checkbox.

<asp:panel id="1" runat="server">
<asp:repeater id="view1" runat="server"/>
</asp:panel>

<asp:panel id="2" runat="server">
<asp:repeater id="view2" runat="server"/>
</asp:panel>

<a onclick="toggle();"/>Toggle</a>

When I transfer between views, I want the checkbox.value to also transfer.

I also want the value of the checkbox to be accessible on a postback. What is the best way to do this?

Answer 1

If you checkboxes in each panel have the same name (or other attribute that was the same you could locate the tag with), then it is fairly simple with Jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    $(document).ready(function () {

        $(".cb").change(function () {
            var name = $(this).attr("name");
            var checked = $(this).attr("checked");
            $(".cb[name=" + name + "]").attr("checked", checked);
        });
    });
</script>

<!-- Assuming this is would be the output of your two <asp:Panel /> controls: -->
<div id="1">
    <input class="cb" type="checkbox" name="cb1" />
    <input class="cb" type="checkbox" name="cb2" />
</div>

<div id="2">
    <input class="cb" type="checkbox" name="cb1" />
    <input class="cb" type="checkbox" name="cb2" />
</div>