如何使独立选择所有复选框以显示表格列答案

【问题标题】：How to make independent select all checkbox to display table columns如何使独立选择所有复选框以显示表格列
【发布时间】：2018-07-11 09:06:07
【问题描述】：

我想制作几个复选框以及 “全选” 复选框。功能如下：

选中复选框以显示表格列。取消选中复选框/es 隐藏表格列/s - （切换）
选中“全选”复选框以显示表格的所有列。
取消选中“全选”复选框以隐藏表格的所有列 - （切换）。
如果选中“全选”复选框，则任何先前标记的该复选框不应显示为选中状态。
如果选中任何其他复选框，则不会对表格列产生影响，如果选中“全选”复选框。

$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
	<html>
	<head>
		<title>Check Box</title>
		
	</head>
	<body>
  <p><input type="checkbox" name="all" checked> Select All</p>
	<p><input type="checkbox" name="symbol" checked> symbol</p>
    <p><input type="checkbox" name="priceChange" checked> priceChange</p>
    <p><input type="checkbox" name="priceChangePercent" checked> priceChangePercent</p>
    <p><input type="checkbox" name="weightedAvgPrice" checked> weightedAvgPrice</p>
    
    <table id="myTable" class="tablesorter"> 
	<thead> 
	<tr> 
	    <th  class="symbol all">symbol</th>
	    <th class="priceChange all">priceChange</th>
	    <th class="priceChangePercent all">priceChangePercent</th> 
	    <th class="weightedAvgPrice all">weightedAvgPrice</th>  
	</tr> 
	</thead>
	</table>
	<script type="text/javascript">
		
		$("all").click(function () {
    	$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

	</script>
	</body>
	</html>

【问题讨论】：

标签： javascript jquery html checkbox html-table

【解决方案1】：

我稍微改变了你的 jquery 函数。我使用的是显示或隐藏列，而不是切换，这取决于复选框的选中属性。检查所有选项后，我会禁用所有其他复选框。

        <p><input type="checkbox" name="all" checked> Select All</p>
        <p><input type="checkbox" name="symbol" checked> symbol</p>
        <p><input type="checkbox" name="priceChange" checked> priceChange</p>
        <p><input type="checkbox" name="priceChangePercent" checked> priceChangePercent</p>
        <p><input type="checkbox" name="weightedAvgPrice" checked> weightedAvgPrice</p>

        <table id="myTable" class="tablesorter" border="1" width="100%"> 
            <thead> 
            <tr> 
                <th class="symbol all">symbol</th>
                <th class="priceChange all">priceChange</th>
                <th class="priceChangePercent all">priceChangePercent</th> 
                <th class="weightedAvgPrice all">weightedAvgPrice</th>  
            </tr> 
            <tr>
                <td class="symbol all">sddsasdaasd</td>
                <td class="priceChange all">iuuiuyui</td>
                <td class="priceChangePercent all">nbnbnmmnmn</td>
                <td class="weightedAvgPrice all">fdsgfgfddfg</td>
            </tr>
            </thead>
            </table>



       <script>
            $(document).ready(function() {
                $("input:checkbox").click(function(){
                    //console.log($(this).attr("name"));
                    //console.log($(this).prop('checked'));

                    if($(this).attr("name") === "all") {
                        var chkAll = $("input:checkbox[name='all']");

                        if( chkAll.is(":checked")){
                            $(":checkbox").not(chkAll).prop("checked",false);//THIS IS IMPORTANT
                            $(":checkbox").not(chkAll).attr("disabled", true);

                        }
                        else {
                            $(":checkbox").not(chkAll).prop("checked",false);//THIS IS IMPORTANT   
                            $(":checkbox").not(chkAll).attr("disabled", false);
                        }                           

                    }

                    var column = "table ." + $(this).attr("name");
                    if($(this).prop('checked')) {
                        $(column).show();    
                    }
                    else {
                        $(column).hide();    
                    }

                });                    

            });

        </script>

【讨论】：