0

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

4 回答 4

0

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

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

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

});

于 2013-03-20T16:06:45.860 回答
0

我运行了一个快速示例。对于提供的代码，您可以尝试使用如下所示的内容。

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

<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-20T16:12:51.760 回答
0

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

于 2013-03-20T16:18:19.417 回答
0

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

$('tr:nth-child(5)').find('input[type=checkbox]').on('change',function(){
    $(this).parent('td').parent('tr').siblings().fadeToggle();
});
于 2013-03-20T16:51:17.313 回答