使用jQuery的列显示/隐藏复选框选择

Question

我正在.NET MVC项目中使用列过滤器。 我的要求是，在下拉列表控件中，所有表标题列名称都将与复选框绑定。 默认情况下，所有选项均处于选中状态。 当我从下拉列表中取消选择任何选项时，它将反映到表数据，并且该列将不会显示。

我编写了一些代码，但无法实现复选框功能。 请帮我。 如果有jquery插件，那对我也有帮助。

JsFiddle演示

码

$("#myOptions").change(function() {
      selectedVal = $.trim($("#myOptions option:selected").text());
    var i = $("#myTable thead .headercell td:contains(" + selectedVal + ")").index() + 1;
    $('td:nth-child(' + i+ ')').toggle();
    });

Answer 1

我认为您想使多重选择更容易：使用select2 ：

 $("#myOptions").select2({ tags: true }).change(function() { var test = $("#myOptions").val(); $("td").show(); for (var j = 0, len = test.length; j < len; j++) { $('td:nth-child(' + test[j] + ')').hide(); } }); 

 body{font-family:calibri;} table { padding: 0; border-collapse: collapse; } table thead td { background-color: #f2f2f2; font-weight:bold;} table td { border: 1px solid #d7d7d7; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select id="myOptions" multiple="multiple" style="width:100%"> <option value="1">Name</option> <option value="2">Address</option> <option value="3">City</option> <option value="4">Country</option> </select> <table id="myTable" cellspacing="0" cellpadding="0"> <thead> <tr class="headercell"> <td>Name</td> <td>Address</td> <td>City</td> <td>Country</td> </tr> </thead> <tbody> <tr class="datacell"> <td>Anand</td> <td>2404/71</td> <td>Mohali</td> <td>India</td> </tr> <tr class="datacell"> <td>Nilesh</td> <td>236/10</td> <td>Chandigarh</td> <td>India</td> </tr> <tr class="datacell"> <td>Rahul</td> <td>A 71 Radhepuri</td> <td>New Delhi</td> <td>India</td> </tr> <tr> <td>Pratius</td> <td>Trishna Apartment-740</td> <td>Hydrabad</td> <td>India</td> </tr> </tbody> </table>