使用 Jquery 切换复选框显示/隐藏

Question

我在下表中填充了使用 AJAX/JSON 的数据 当我单击特定行时，它会使用表格行中的值填充一些文本框，这些值可以正常工作，根据行中的值，我将隐藏或显示一些复选框，但我无法让该部分工作。 下面是我的代码，不知道做错了什么。 提前感谢您的帮助

    <script type="text/javascript">
    $(document).ready(function () {
        "responsive"; true,
        "serverSide"; true,
        "info"; true,
        "stateSave"; true,
     $.ajax({
         type: "POST",
         dataType: "json",
         url:"CustomerService.asmx/GetCustomer",
         success: function (data) {
             var datatableVariable = $('#dtCustomers').DataTable({

                 data: data,
                 columns: [
                     { 'data': 'iD' },
                     { 'data': 'AccountNumber' },
                     { 'data': 'Name' },
                      { 'data': 'FirstName' },
                       { 'data': 'LastName' },
                        { 'data': 'Balance' },
                         { 'data': 'TypeOfAccount' }
                 ],
                 columnDefs: [
             { "visible": false, "targets": 0 },
              { "visible": false, "targets": 3 },
               { "visible": false, "targets": 4 },
               { "visible": false, "targets": 6 }
                 ]
             });
             datatableVariable.columns().every(function () {
                 var column = this;
                 $(this.footer()).find('input').on('keyup change', function () {
                     column.search(this.value).draw();
                 });
             });
             $('.showHide').on('click', function () {
                 var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                 tableColumn.visible(!tableColumn.visible());
             });


             $('#dtCustomers').on('click', 'tr', function () {

                 var data = datatableVariable.row(this).data();
                 $(document.getElementById('<%= customerids.ClientID %>')).val(data.iD);
                 $(document.getElementById('<%= lblFnames.ClientID %>')).val(data.FirstName);
                 $(document.getElementById('<%= lblLnames.ClientID %>')).val(data.LastName);
                 $(document.getElementById('<%= lblacc.ClientID %>')).val(data.AccountNumber);
                 $(document.getElementById('<%= lblBals.ClientID %>')).val(data.Balance);
                 $(document.getElementById('<%= acctypes.ClientID %>')).val(data.TypeOfAccount);
                 //debugger;
                 switch (data.TypeOfAccount) {
                     case 0:
                         $(document.getElementById('<%= chkNCs.ClientID %>')).hide
                         $(document.getElementById('<%= chkODs.ClientID %>')).hide
                         $(document.getElementById('<%= chkRODs.ClientID %>')).hide
                         break;
                     case 4:
                         $(document.getElementById('<%= chkNCs.ClientID %>')).visible
                         $(document.getElementById('<%= chkODs.ClientID %>')).visible
                         $(document.getElementById('<%= chkRODs.ClientID %>')).visible
                         break;

                     default:

                 }
             });
         }
     });
    });

</script>
<div class="">
   <ul style="list-style-type:none;float:left;display: inline;margin:0;padding:0;">
      <li class="list"><asp:CheckBox runat="server" id="chkRODs" name="chkRODs"  Text="Repayment of OD" visible="false"/></li>
      <li class="list"><asp:CheckBox runat="server" id="chkODs" name="chkODs"  Text="Interest on Repayment" visible="false" /></li>
     <li class="list"><asp:CheckBox runat="server" id="chkNCs" name="chkNCs"  Text="Non-Cash Transaction" visible="false" /></li>
</ul>

Answer 1

这里给出的代码有几点需要注意：

1) 因为您在 ASPX 控件上设置了“Visible=false”选项，这意味着复选框的标记永远不会呈现到页面 - 您可以通过使用已完成页面上的查看源代码并搜索他们。

2) 它应该是 .hide() 而不是 .hide - 如果没有 ()，该方法将不会实际执行。你应该使用 .show() 作为相反的，而不是 .visible - 这只是一个 HTML 对象的属性（所以你必须设置它），但它不存在于你正在尝试的 jQuery 对象上用它来对付。

3) 所有这些都是在您的 ajax “成功”函数的上下文中完成的。这意味着，每次运行 ajax 函数时，您都会创建所有事件处理程序的另一个副本 - 这意味着如果您运行 ajax 3 次，每个表行都会有 3 个“单击”事件处理程序。这可能会使事情变得混乱。您要么需要使用“off”删除以前的处理程序，要么在 ajax 方法之外声明处理程序。

最后，切换所有复选框的最简单且最简洁的方法是实际切换封闭的 div - 这将隐藏其中的所有内容：

HTML

<div id="options" style="display:none;">
   <ul style="list-style-type:none;float:left;display: inline;margin:0;padding:0;">
      <li class="list"><asp:CheckBox runat="server" id="chkRODs" name="chkRODs"  Text="Repayment of OD" /></li>
      <li class="list"><asp:CheckBox runat="server" id="chkODs" name="chkODs"  Text="Interest on Repayment" /></li>
     <li class="list"><asp:CheckBox runat="server" id="chkNCs" name="chkNCs"  Text="Non-Cash Transaction" /></li>
   </ul>
</div>

脚本

$('#dtCustomers').on('click', 'tr', function () {
  var data = datatableVariable.row(this).data();
  //etc...until
  switch (data.TypeOfAccount) {
    case 0:
      $("#options").hide();
      break;
    case 4:
      $("#options").show();
      break;
    default:
  }
});

在此处查看演示原理的简化但有效的示例：https://jsfiddle.net/5hyvwLqg/