我有以下 html 页面
我想在每列的标题处创建一个复选框，选中该复选框后将选中该列中的所有复选框。如何实现该功能？我认为 jquery 或 javascript 会有帮助，但我对它们很陌生
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="next.php" method="post">
<select style="width: 200px;" name="d">
<option value="1" id="spanDate"></option>
<option value="2" id="spanDate1"></option>
<option value="3" id="spanDate2"></option>
</select>
<br><br><br>
<table class="CSSTableGenerator">
<tr>
<th>Date</th>
<th>00:00-03:00</th>
<th>03:00-06:00</th>
<th>06:00-09:00</th>
<th>09:00-12:00</th>
<th>12:00-15:00</th>
<th>15:00-18:00</th>
<th>18:00-21:00</th>
<th>21:00-00:00</th>
</tr>
<tr>
<td>Noida Sector 1</td>
<td><input type="checkbox" name="time[]" value="1" ></td>
<td><input type="checkbox" name="time[]" value="2" ></td>
<td><input type="checkbox" name="time[]" value="3" ></td>
<td><input type="checkbox" name="time[]" value="4" ></td>
<td><input type="checkbox" name="time[]" value="5" ></td>
<td><input type="checkbox" name="time[]" value="6" ></td>
<td><input type="checkbox" name="time[]" value="7" ></td>
<td><input type="checkbox" name="time[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 2</td>
<td><input type="checkbox" name="time1[]" value="1" ></td>
<td><input type="checkbox" name="time1[]" value="2" ></td>
<td><input type="checkbox" name="time1[]" value="3" ></td>
<td><input type="checkbox" name="time1[]" value="4" ></td>
<td><input type="checkbox" name="time1[]" value="5" ></td>
<td><input type="checkbox" name="time1[]" value="6" ></td>
<td><input type="checkbox" name="time1[]" value="7" ></td>
<td><input type="checkbox" name="time1[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 3</td>
<td><input type="checkbox" name="time2[]" value="1" ></td>
<td><input type="checkbox" name="time2[]" value="2" ></td>
<td><input type="checkbox" name="time2[]" value="3" ></td>
<td><input type="checkbox" name="time2[]" value="4" ></td>
<td><input type="checkbox" name="time2[]" value="5" ></td>
<td><input type="checkbox" name="time2[]" value="6" ></td>
<td><input type="checkbox" name="time2[]" value="7" ></td>
<td><input type="checkbox" name="time2[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 4</td>
<td><input type="checkbox" name="time3[]" value="1" ></td>
<td><input type="checkbox" name="time3[]" value="2" ></td>
<td><input type="checkbox" name="time3[]" value="3" ></td>
<td><input type="checkbox" name="time3[]" value="4" ></td>
<td><input type="checkbox" name="time3[]" value="5" ></td>
<td><input type="checkbox" name="time3[]" value="6" ></td>
<td><input type="checkbox" name="time3[]" value="7" ></td>
<td><input type="checkbox" name="time3[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 5</td>
<td><input type="checkbox" name="time4[]" value="1" ></td>
<td><input type="checkbox" name="time4[]" value="2" ></td>
<td><input type="checkbox" name="time4[]" value="3" ></td>
<td><input type="checkbox" name="time4[]" value="4" ></td>
<td><input type="checkbox" name="time4[]" value="5" ></td>
<td><input type="checkbox" name="time4[]" value="6" ></td>
<td><input type="checkbox" name="time4[]" value="7" ></td>
<td><input type="checkbox" name="time4[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 6</td>
<td><input type="checkbox" name="time5[]" value="1" ></td>
<td><input type="checkbox" name="time5[]" value="2" ></td>
<td><input type="checkbox" name="time5[]" value="3" ></td>
<td><input type="checkbox" name="time5[]" value="4" ></td>
<td><input type="checkbox" name="time5[]" value="5" ></td>
<td><input type="checkbox" name="time5[]" value="6" ></td>
<td><input type="checkbox" name="time5[]" value="7" ></td>
<td><input type="checkbox" name="time5[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 7</td>
<td><input type="checkbox" name="time6[]" value="1" ></td>
<td><input type="checkbox" name="time6[]" value="2" ></td>
<td><input type="checkbox" name="time6[]" value="3" ></td>
<td><input type="checkbox" name="time6[]" value="4" ></td>
<td><input type="checkbox" name="time6[]" value="5" ></td>
<td><input type="checkbox" name="time6[]" value="6" ></td>
<td><input type="checkbox" name="time6[]" value="7" ></td>
<td><input type="checkbox" name="time6[]" value="8" ></td>
</tr>
</table>
<br><br><br>
<input type="submit" name="enable" value="enable">
<input type="submit" name="disable" value="disable">
</form>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));
document.getElementById("spanDate1").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime());
document.getElementById("spanDate").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24) + (1000*3600*24));
document.getElementById("spanDate2").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
</body>
</html>
最佳答案
添加<input type="checkbox" name="checkall" value="1" />在每列的标题处，然后更改值以对应于列中复选框的值。
然后使用jquery，添加
$('input[name=checkall]').each(function(){
$(this).click(function(){
if(this.checked === true){
checkAll(this.value);
}else{
unCheckAll(this.value);
}
})
})
function checkAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , true );
}
function unCheckAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , false );
}
关于javascript - 检查列中的所有复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30864746/