Jquery函数用于循环遍历checbbox以显示/隐藏n列表

How can I loop through all my checkboxes and retrieves input "checked or unchecked" and passing to my function and hide or show my column table?

如何遍历所有复选框并检索输入“已选中或未选中”并传递给我的函数并隐藏或显示我的列表?

My HTML

<div class="columnchecking">
       <h1>Check/Uncheck for showing/hiding columns of table</h1>
       <br /> 
       <font size="4"><input id="formnamecheck" type="checkbox">Formname &emsp;</font>
       <font size="4"><input id="typecheck" type="checkbox">Type &emsp;</font> 
       <font size="4"><input id="languagecheck" type="checkbox">Language &emsp;</font> 
       <font size="4"><input id="gpartcheck" type="checkbox">Gpart &emsp;</font>
    </div>
    <table>
       <thead>
          <tr>
             <th>Formname</th>
             <th>Formname</th>
             <th>Type</th>
             <th>Language</th>
             <th>Gpart</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>Test</td>
             <td>Test</td>
             <td>Test</td>
             <td>Test</td>
          </tr>
       </tbody>
    </table>

Javascript:

<script type="text/javascript">
$(document).ready(function() {
    $("#formnamecheck").click(function() {
        if ($(this).is(':checked')) {
            $('td:nth-child(n),th:nth-child(n)').hide();
        } else {
            $('td:nth-child(n),th:nth-child(n)').show();
        }
    });
});

Where N is my n-th column in my table

其中N是我表中的第n列

2 个解决方案

#1

You can add a container div element to the checboxes to get the index of every element in it and use it when you want to hide or show a certain column using toggle() as a shorter method than if ... else:

您可以将一个容器div元素添加到checbox中以获取其中每个元素的索引,并在您想要使用toggle()作为比if ... else更短的方法隐藏或显示某个列时使用它;

$(document).ready(function() {
  $("input[type='checkbox']").change(function() {
    var index = $(this).parent().index() + 1;
    $('td:nth-child(' + index + '),th:nth-child(' + index + ')').toggle($(this).is(':checked'));
  }).change();
});

td,
th {
  border: 2px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columnchecking">
  <h1>Check/Uncheck for showing/hiding columns of table</h1>
  <br />
  <div class='checboxes_container'>
    <font size="4"><input id="formnamecheck" type="checkbox">Formname &emsp;</font>
    <font size="4"><input id="typecheck" type="checkbox">Type &emsp;</font>
    <font size="4"><input id="languagecheck" type="checkbox">Language &emsp;</font>
    <font size="4"><input id="gpartcheck" type="checkbox">Gpart &emsp;</font>
  </div>
</div>
<table>
  <thead>
    <tr>
      <th>Formname
      </th>
      <th>Type
      </th>
      <th>Language
      </th>
      <th>Gpart
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test 1</td>
      <td>Test 2</td>
      <td>Test 3</td>
      <td>Test 4</td>
    </tr>
  </tbody>
</table>

#2

You have to get value of N first!

你必须首先获得N的价值!

$(document).ready(function() {
    $("#formnamecheck").click(function() {
        var n = $('input').index($(this))+1;
        if ($(this).is(':checked')) {
            $('td:nth-child('+n+'),th:nth-child('+n+')').hide();
        } else {
            $('td:nth-child('+n+'),th:nth-child('+n+')').show();
        }
    });
});