jquery循環顯示/隱藏n列的checbbox函數表

如何循環瀏覽我的所有複選框並檢索輸入「已選中或未選中」並傳遞給我的函數並隱藏或顯示我的列表？jquery循環顯示/隱藏n列的checbbox函數表

我的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(); 
     } 
    }); 
});

其中N是我的第n列在我的表

來源

2017-04-05 algorithmic

您可以在容器div元素添加到checboxes讓每一個元素的索引它，當你想隱藏或使用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>

來源

2017-04-05 12:28:47 Ionut

謝謝您的回答，但是我不得不修改我的情況下工作和更改的.index（） - 1和$（本）。是（「：檢查」）！），因爲我做n ot希望當我的頁面加載時默認隱藏列 – algorithmic

@algorithmic，不客氣。很高興能有所幫助。是的，的確，如果不添加'div'容器，'font'元素的索引數將從2開始，這就是爲什麼你必須添加'-1'。我很高興你明白了。 – Ionut

感謝您的澄清:) – algorithmic

你必須得到ň第一價值！

$(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(); 
     } 
    }); 
});

來源

2017-04-05 12:18:37 demonofthemist

jquery循環顯示/隱藏n列的checbbox函數表

回答

相關問題