CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Prabhjot Singh Kainth
Prabhjot Singh Kainth

Reputation: 1861

checking all checkboxes in a column

I have the following html page

I want to make a check box at the heading of every column which when checked will check all the check boxes in the column.How do I achieve that functionality? I think jquery or javascript will help but I am new to them

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

Upvotes: 2

Views: 158

Answers (1)

M El
M El

Reputation: 81

Add <input type="checkbox" name="checkall" value="1" /> at the heading of every column and change value to correspond to the value of the checkboxes in the colummn.

Then using jquery, add

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

Upvotes: 3

Related Questions