Question

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

Answer 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 );
}

检查列中的所有复选框

1 个答案: