检查列中的所有复选框答案

【问题标题】：checking all checkboxes in a column检查列中的所有复选框
【发布时间】：2015-06-17 01:47:04
【问题描述】：

我有以下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>

【问题讨论】：

以编程方式选中和取消选中 JavaScript 是必需的；尽管您是否选择使用特定的库、jQuery 或其他方式，都由您决定。
是的，我知道 javascript 将是必要的，但如何使用 javascript 实现它
link的可能重复
然后将其添加到您问题的标签中；并将您提供的代码精简到演示用例所需的最低限度（您的 CSS 与所描述的问题完全无关，并且 HTML 太多）。如果您只能显示您尝试编写的 JavaScript 或 jQuery 来执行此功能，那将很有帮助。请参阅“MCVE”以获取有关如何在您的问题中显示有用代码的更多指导。

标签： javascript jquery html checkbox

【解决方案1】：

在每列的标题处添加<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 );
}

【讨论】：