我正在尝试在选中复选框与否时隐藏/显示表列。这是有效的，但不是我需要它的方式。我需要复选框在提交表单后保持选中状态，并且列要保留
提前感谢您的任何帮助
这就是我到目前为止所拥有的
<!DOCTYPE html>
<html>
<head>
<title>javascript test</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
table ,td ,th{
border-collapse: collapse;
border: 1px solid black;
}
td, th{
min-width: 150px;
}
th{
padding: 15px;
}
td{
padding: 10px;
}
body{
font-family: arial;
}
</style>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="suche">
<input type="submit" name="senden">
<br/>
<br/>
</form>
<form>
<label>Spalte1<input type="checkbox" name="col1"></label>
<label>Spalte2<input type="checkbox" name="col2"></label>
<label>Spalte3<input type="checkbox" name="col3"></label>
<label>Spalte4<input type="checkbox" name="col4"></label>
<label>Spalte5<input type="checkbox" name="col5"></label>
<label>Spalte6<input type="checkbox" name="col6"></label>
</form>
<br/>
<br/>
<table>
<tr>
<th class="col1">Spalte1</th>
<th class="col2">Spalte2</th>
<th class="col3">Spalte3</th>
<th class="col4">Spalte4</th>
<th class="col5">Spalte5</th>
<th class="col6">Spalte6</th>
</tr>
<tr>
<td>Spalte1</td>
<td>Spalte2</td>
<td>Spalte3</td>
<td>Spalte4</td>
<td>Spalte5</td>
<td>Spalte6</td>
</tr>
</table>
</body>
</html>
您可以使用 php 来处理表单值。在页面顶部，如果值是从发布表单传递的，我们将设置一些局部变量。
然后在 html 中，我们设置 check 值，并设置 td 元素的显示属性，以便在页面加载时隐藏它们。
设置选中的属性
<label>Spalte1<input type="checkbox" name="col1" <?=$col1?>></label>
设置TD的显示
<td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte1</td>
不幸的是，我没有在这台计算机上安装 php，所以希望没有语法错误，因为我无法检查。
<?php
// if the post var is passed set local variables of the checkbox state
$col1 = isset($_POST['col1']) ? 'checked' : '';
$col2 = isset($_POST['col2']) ? 'checked' : '';
$col3 = isset($_POST['col3']) ? 'checked' : '';
?>
<!DOCTYPE html>
<html>
<head>
<title>javascript test</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
table ,td ,th{
border-collapse: collapse;
border: 1px solid black;
}
td, th{
min-width: 150px;
}
th{
padding: 15px;
}
td{
padding: 10px;
}
body{
font-family: arial;
}
</style>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="suche">
<input type="submit" name="senden">
</form>
<form>
<!-- set the checkbox state if it's available -->
<label>Spalte1<input type="checkbox" name="col1" <?=$col1?>></label>
<label>Spalte2<input type="checkbox" name="col2" <?=$col2?>></label>
<label>Spalte3<input type="checkbox" name="col3" <?=$col3?>></label>
</form>
<table>
<tr>
<th class="col1">Spalte1</th>
<th class="col2">Spalte2</th>
<th class="col3">Spalte3</th>
</tr>
<tr>
<td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte1</td>
<td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte2</td>
<td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte3</td>
</tr>
</table>
</body>
</html>
<form action="#" method="post" onsubmit="return false">
试试onsubmit="return false"