显示/隐藏基于复选框选中/取消选中

我有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>

来源

2013-03-20 Mark Highfield

调用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

我没有检查它，但它应该工作

$(function() { 
    $('#<%=chkFrench.ClientID %>').click(function(){ 
    if($(this).is(':checked')){ 
    $('.EnhancedFrench').show(); 

}else{ 
    $('.EnhancedFrench').hide(); 
} 
    });

}）;

来源

2013-03-20 16:06:45

我跑了一个快速样本。对于提供的代码，你可以尝试使用类似下面的东西。

如果最后选中复选框

<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>

来源

2013-03-20 16:12:51 Dinesh

抱歉，我没有很好地说出我的问题。我需要其余的显示/隐藏chkFrench复选框被选中/未选中 – 2013-03-20 16:48:04

我更新了答案。您可能需要根据需要更改显示和隐藏方法调用 – Dinesh 2013-03-20 17:10:33

我建议你到复选框保持到一个容器中，并使用该容器，显示隐藏这应该隐藏所有的复选框。

来源

2013-03-20 16:18:19

你也可以做到这一点的方式如下：

$('tr:nth-child(5)').find('input[type=checkbox]').on('change',function(){ 
    $(this).parent('td').parent('tr').siblings().fadeToggle(); 
});

来源

2013-03-20 16:51:17 sanman

显示/隐藏基于复选框选中/取消选中

回答

相关问题