Question

我想制作一些复选框以及＆＃34;选择所有＆＃34; 复选框。功能如下：

选择复选框/ es以显示表格列/ s。取消选中 checkbox / es隐藏表格列/ s - （切换）
选择＆＃34;全选＆＃34;复选框以显示所有表格列取消选中＆＃34;全选＆＃34;复选框以隐藏表格的所有列 - （切换）。
如果＆＃34;全选＆＃34;复选框被标记，然后是任何先前标记的复选框不应显示为已选中。
如果选中任何其他复选框，则不会对表格列产生任何影响，如果＆＃34;选择全部＆＃34;选中复选框。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我稍微更改了你的jquery函数。我使用show或hide列，而不是切换，具体取决于复选框的checked属性。选中all all后，我将禁用所有其他复选框。

        <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>

如何独立选择全部复选框以显示表格列

1 个答案: