Checkbox Select all php javascript

Question

I made a script in order to create a select all option for items in a form.

<script>
        function Check(frm){
        var checkBoxes = frm.elements['patients[]'];

        for (i = 0; i < checkBoxes.length; i++){
          checkBoxes[i].checked = (checkBoxes[i].checked != true ) ? true : false;
        }

        }

        window.onload = function(){
            document.getElementById("selectpatient").onchange = function(){Check(document.selectform)};
        };
</script>

This works fine with the following sample code.

<body>
<form name="selectform" method="" action="">
<label for="red">Red</label>
<input type="checkbox" name="patients[]" value="red" id="red"/><br />

<label for="blue">Blue</label>
<input type="checkbox" name="patients[]" value="blue" id="blue"/><br />

<label for="green">Green</label>
<input type="checkbox" name="patients[]" value="green" id="green"/><br />

<label for="black">Black</label>
<input type="checkbox" name="patients[]" value="black" id="black"/><br /><br />

<label for="selectall" id="selectControl">Select All</label>
<input type="checkbox" id="selectall" />
</form>

<script>
function Check(frm){
var checkBoxes = frm.elements['patients[]'];

for (i = 0; i < checkBoxes.length; i++){
checkBoxes[i].checked = (checkBoxes[i].checked != true ) ? true : false;
}

}

window.onload = function(){
document.getElementById("selectall").onchange = function() Check(document.selectform)};
};
</script>
</body>

However, I have a separate php code in which I am trying to run a code to be able to select items from a database.The Php segment is as follows.

            <div class="row"><form name="selectform" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post">
        <div class="box clearfix">
        <table class="table" >
            <thead>
            <tr>
                <th><input type="checkbox" id='selectall' ></th>

                <th>First Name</th>
                <th>Last Name</th>
                <th>NIC</th>
                <th>Address</th>

                <th>Telephone/Mobile</th>
                <th>Disability</th>
                <th>Reason</th>
                <th>Description</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <?php 
                while ($data = $res->fetch_assoc()){
                    echo "<tr><td><input type='checkbox' name='patients[]' id='patients[]' value='".$data['PatientID']."'></td><td>".$data['First_Name']."</td><td>".$data['Last_Name']."</td><td>".$data['NIC_No']."</td><td>".$data['Address']."</td><td>".$data['Telephone']."</td><td>".$data['Disability']."</td><td>".html_entity_decode($data['Reason'])."</td><td>".html_entity_decode($data['Description'])."</td>";
                }
            ?>
            </tbody>
        </table>
    </div>

                </form>
                <script>
                        function Check(frm){
                        var checkBoxes = frm.elements['patients[]'];

                        for (i = 0; i < checkBoxes.length; i++){
                          checkBoxes[i].checked = (checkBoxes[i].checked != true ) ? true : false;
                        }

                        }

                        window.onload = function(){
                          document.getElementById("selectall").onchange = function(){Check(document.selectform)};
                        };
                   </script>

    </div>

The above code does not execute the select all script. Please suggest as to what I can do to make this functional.

Jai · Accepted Answer · 2016-02-17 09:23:47Z

1

Seems that you are missing { of the onchange callback:

function Check(frm) {
  var checkBoxes = frm.elements['patients[]'];

  for (i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].checked = (checkBoxes[i].checked != true) ? true : false;
  }

}

window.onload = function() {
  document.getElementById("selectall").onchange = function() { // <--missing { here
    Check(document.selectform)
  };
};

<form name="selectform" method="" action="">
  <label for="red">Red</label>
  <input type="checkbox" name="patients[]" value="red" id="red" />
  <br />

  <label for="blue">Blue</label>
  <input type="checkbox" name="patients[]" value="blue" id="blue" />
  <br />

  <label for="green">Green</label>
  <input type="checkbox" name="patients[]" value="green" id="green" />
  <br />

  <label for="black">Black</label>
  <input type="checkbox" name="patients[]" value="black" id="black" />
  <br />
  <br />

  <label for="selectall" id="selectControl">Select All</label>
  <input type="checkbox" id="selectall" />

Or you can simplify this more as:

function Check(frm, ischecked) {
  var checkBoxes = frm.elements['patients[]'];

  for (i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].checked = ischecked; // and just update for all here
  }

}

window.onload = function() {
  document.getElementById("selectall").onchange = function() { // <--missing { here
    Check(document.selectform, this.checked); // <----pass the state here
  };
};

<form name="selectform" method="" action="">
  <label for="red">Red</label>
  <input type="checkbox" name="patients[]" value="red" id="red" />
  <br />

  <label for="blue">Blue</label>
  <input type="checkbox" name="patients[]" value="blue" id="blue" />
  <br />

  <label for="green">Green</label>
  <input type="checkbox" name="patients[]" value="green" id="green" />
  <br />

  <label for="black">Black</label>
  <input type="checkbox" name="patients[]" value="black" id="black" />
  <br />
  <br />

  <label for="selectall" id="selectControl">Select All</label>
  <input type="checkbox" id="selectall" />

answered Feb 17, 2016 at 9:23

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kavinda Keshan Rasnayake Over a year ago

Thank you, but I am more interested in the 3rd code, which does not run as intended. Shall I attach the complete code ?

Jai Over a year ago

@Adniwhack that might be the case with same IDs applied, you can either use uqique ids for them or change the prop ID to class.

Collectives™ on Stack Overflow

Checkbox Select all php javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related