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.
如果页面上有2个用户控件,并且它们都有checbox控件。选中/取消选中一个用户控件中的复选框应检查/取消选中另一个用户控件中的复选框。
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
2 个解决方案
#1
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 :
是的,最简单的方法是使用jquery css选择器并操纵复选框值。这是一个简单的代码片段:
$("#checkbox1").attr("checked", $("#checkbox2").attr("checked"))
the value of checkbox1 is set depending upon the "checked" value of checkbox2
checkbox1的值是根据checkbox2的“checked”值设置的
#2
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.
当然,不言而喻,有更简单的方法可以用jQuery做到这一点,但这里有一个如何在没有它的情况下做到这一点的例子。
<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:
这是使用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>
#1
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 :
是的,最简单的方法是使用jquery css选择器并操纵复选框值。这是一个简单的代码片段:
$("#checkbox1").attr("checked", $("#checkbox2").attr("checked"))
the value of checkbox1 is set depending upon the "checked" value of checkbox2
checkbox1的值是根据checkbox2的“checked”值设置的
#2
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.
当然,不言而喻,有更简单的方法可以用jQuery做到这一点,但这里有一个如何在没有它的情况下做到这一点的例子。
<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:
这是使用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>