显示/隐藏基于复选框选中/取消选中
我有5个复选框。其中4人必须根据第5位是否被选中/未选中来显示/隐藏。我正在尝试使用JQuery来做到这一点,但是由于某种原因,我并没有完全明白。我点击正确检查checked/unchecked属性的代码段,只是没有得到正确的显示/隐藏代码。我已经尝试过使用CSS类来选择需要切换的复选框。这里的jQuery和的.aspx代码显示/隐藏基于复选框选中/取消选中
$(function() {
$('#<%=chkFrench.ClientID %>').unbind('click');
$('#<%=chkFrench.ClientID %>').click(function() {
enable_cb();
$(".EnhancedFrench").click(enable_cb);
});
});
function enable_cb() {
if (this.checked) {
alert("show");
$('.EnhancedFrench').show();
} else {
alert("hide");
$('.EnhancedFrench').hide();
}
}
<table>
<tr>
<td>Display Live (Fr):</td>
<td><asp:CheckBox runat="server" ID="chkFrench" CssClass="EnhancedFrench" />/td>
</tr>
<tr>
<td>French1</td>
<td><asp:CheckBox runat="server" ID="CheckBox1" CssClass="EnhancedFrench" /></td>
</tr>
<tr>
<td>French2</td>
<td><asp:CheckBox runat="server" ID="CheckBox2" CssClass="EnhancedFrench" /></td>
<tr>
<tr>
<td>French3</td>
<td><asp:CheckBox runat="server" ID="CheckBox3" CssClass="EnhancedFrench" /></td>
</tr>
<tr>
<td>French4</td>
<td><asp:CheckBox runat="server" ID="CheckBox4" CssClass="EnhancedFrench" /></td>
</tr>
</table>
我没有检查它,但它应该工作
$(function() {
$('#<%=chkFrench.ClientID %>').click(function(){
if($(this).is(':checked')){
$('.EnhancedFrench').show();
}else{
$('.EnhancedFrench').hide();
}
});
});
我跑了一个快速样本。对于提供的代码,你可以尝试使用类似下面的东西。
如果最后选中复选框
<script type="text/javascript">
$(function() {
$('[id$="chkFrench"]').bind('change', function() { enable_cb(); });
});
function enable_cb() {
if ($('[id$="chkFrench"]').is(':checked')) {
$('span.EnhancedFrench:gt(0)').hide();
}
else {
$('span.EnhancedFrench:gt(0)').show();
}
}
</script>
抱歉,我没有很好地说出我的问题。我需要其余的显示/隐藏chkFrench复选框被选中/未选中 – 2013-03-20 16:48:04
我更新了答案。您可能需要根据需要更改显示和隐藏方法调用 – Dinesh 2013-03-20 17:10:33
我建议你到复选框保持到一个容器中,并使用该容器,显示隐藏这应该隐藏所有的复选框。
你也可以做到这一点的方式如下:
$('tr:nth-child(5)').find('input[type=checkbox]').on('change',function(){
$(this).parent('td').parent('tr').siblings().fadeToggle();
});
调用enable_cb() – 2013-03-20 16:02:38
@MarkHighfield时应该规则适用上的每个点击复选框和隐藏休息或只是'CheckBox4你是不是传递对象'? – 2013-03-20 16:19:40
基本上,如果chkFrench被选中,其他4应该是可见的,否则其他4应该不可见 – 2013-03-20 16:40:35