Communication between user controls on the page – C#/ASP.NET

Question

If there are 2 user controls on a page and both of them have checbox controls. Checking/Unchecking a checkbox in one user control should check/uncheck the one in the other user control.

I see there is a need for user control communication.

Any way I can do this on the client side? (I don't want to use server side code)

Thanks

Answer 1

Off course, it goes without saying, there are easier ways of doing this with jQuery, but here's an example of how to do it without it.

<asp:CheckBox runat="server" ID="CheckBox1" onclick="checkBoxChanged1(this)" />
<asp:CheckBox runat="server" ID="CheckBox2" onclick="checkBoxChanged2(this)"/>

<script type="text/javascript">
var checkBox1 = document.getElementById("<%=CheckBox1.ClientID %>");
var checkBox2 = document.getElementById("<%=CheckBox2.ClientID %>");
function checkBoxChanged1(e)
{
    checkBox2.checked = e.checked;      
}
function checkBoxChanged2(e)
{
    checkBox1.checked = e.checked;      
}
</script>

Here's the same example using jQuery:

<script type="text/javascript">
  $(function(){
       $("#<%=CheckBox1.ClientID %>").click(function(){
           $("#<%=CheckBox2.ClientID %>").checked = this.checked;
        });
       $("#<%=CheckBox2.ClientID %>").click(function(){
           $("#<%=CheckBox1.ClientID %>").checked = this.checked;
        });             
   });
</script>

Answer 2

yes, the easiest way to do this is using jquery css selectors and manipulating the checkbox values. here is a simple code snippet to do that :

$("#checkbox1").attr("checked", $("#checkbox2").attr("checked"))

the value of checkbox1 is set depending upon the "checked" value of checkbox2