Question

我有5个复选框。其中4个必须根据是否选中/取消选中第5个来显示/隐藏。我正在尝试使用JQuery来做到这一点，但是由于某些原因我并没有完全正确。我正在点击正确检查已检查/未检查属性的代码部分，只是没有得到正确的显示/隐藏代码。我已经尝试使用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>

Answer 1

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

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

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

}）;

Answer 2

我跑了一个快速的样本。对于提供的代码，您可以尝试使用以下内容。

如果选中了最后一个复选框，则应隐藏所有复选框

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

Answer 3

我建议您将复选框保留在容器中，然后使用该容器显示隐藏。

Answer 4

您也可以通过以下方式执行此操作：

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

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

4 个答案: