0

Select All Input Checkbox is doesn't work. I checked the code without ajax call, then select all checkbox is perfectly worked. When select all checkbox is checked all the checkbox shown inside the while loop is checked.But when i integrated with main html page the select all checkbox is not worked. please tell me What changes i need to apply for the correct working of select all checkbox with below code.

HTML Page

  <html>
  <head>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script>
    $(function(){
      $('.parent').on('click', function() {
          var checked = this.checked;
          $(this).parents('table').find('.child').each(function() {
            this.checked = checked;
          });
      });
    });
</script>
</head>
<body>
<form  name="form1" method="post"  enctype="multipart/form-data" action="pras.php" class="form-horizontal" >                                                
<fieldset>
<div class="form-group">
<label for="select111" class="col-md-2 control-label">Select Division</label>
<div class="col-md-10">
<select name="divis" id=division class="form-control" onchange="showUsers(this.value)">                                         

</select>
  </div>
</div>
<div id="txtHint"><b></b></div> 
    <div class="form-group">
        <p align="center"> 
        <input class="btn btn-primary" type="submit" name="submit" value="submit">
        </p>
    </div>
</fieldset>
</form>
<script>
function showUsers(vari) {
if (vari== "" && vari== 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","get_user_div.php?&variable="+vari,true);
    xmlhttp.send();
}
}
</script>
</body>
</html>

get_user_div.php

 echo "<table class='table table-bordered'>
<tr>
 <th>Register Number</th>
 <th>Prasent/Abstent </br> Select All <input type='checkbox' name='select1' id='select1' class='parent' />
 </th>
 </tr>";
 while($row = mysql_fetch_array($result)) {
$sql="SELECT * FROM attandance WHERE register_no= '$row[register_no]'";
$res = mysql_query($sql);
$col = mysql_fetch_array($res);
echo "<tr>";
echo "<td>" . $row['register_no'] . "</td>";
echo "<td>
        <input type ='checkbox' name='present[]' value='$row[register_no]' class='child' id='check[]'/>
      </td>";
 echo "</tr>";
}

  echo '</tr>';
  echo "</table>";
Jees K Denny
  • 531
  • 5
  • 27
  • You aren't binding click event because you are trying to bind it before element is available in the DOM. So delegate event or bind it once the ajax request is done – A. Wolff Jul 13 '16 at 08:12
  • looks like you are attaching the event to '.parent', but it doesn't exist when you attach the event – krisph Jul 13 '16 at 08:13
  • If you have jQuery use it. `function showUsers(vari) { $("#txtHint").empty(); if (vari) $("#txtHint").load("get_user_div.php?&variable="+vari); }` – mplungjan Jul 13 '16 at 08:16
  • Gotchaa! Thanks For the valuable Comments and Time. @wolf, @krisph, @mplungjan. I do a small change in script. ` ` – Jees K Denny Jul 13 '16 at 12:38

0 Answers0