Checking if checkboxes in PHP are checked using javascript

Question

echo '<div  class="col-lg-10 col-lg-offset-1 panel">' . "<table id='data' class='table'>
       <tr>
       <th></th>
       <th>Document No</th>
       <th>AWB NO</th>
       <th>Order Id</th>
       <th>Forms</th>
       <th>Extras</th>
       </tr>";
foreach ($cancel as $key => $value)
{
    echo "<tr>";
    echo "<td>" . "<input type='checkbox' name='name1' id='checkit$checkitCounter' />" . "</td>";
    echo "<td>" . $value[$d] . "</td>";
    echo "<td>" . $value[$a] . "</td>";
    echo "<td>" . $value[$o] . "</td>";
    echo "<td>" . $value[$f] . "</td>";
    echo "<td>" . $value[$e] . "</td>";
    echo "</tr>";
}
echo "</table></div>";

This above table is generated using php echo with checkbox generated every iteration.

<div style="padding-left:600px;">
    <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()'
       role='button'>Continue..</a>
</div>

The above button is supposed to run a javascript function given below:

function checkit {
    var x = document.getElementById("checkit").checked;
    if (x == false) {
        alert('All items are not removed,pls remove and continue');
    }
    else {
        window.location = "tst.php";
    }
}

The above JavaScript doesn't seem to be functioning properly as even though i have checked none of the boxes it just stays on the same page.

Answer 1

Example:

<div style="padding-left:600px;"> <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()' role='button'>Continue..</a>

</div>
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />

And js:

function checkit() {
    var boxes = document.querySelectorAll(".checkit");
    arr = [];
    for (i = 0; i < boxes.length; i++) {
        arr.push(boxes[i]);
    }

    console.log(arr);

    function is_checked(val) {
        return val.checked == true;
    }

    checked = arr.filter(is_checked);

    console.log(checked);

    if (checked.length != boxes.length) {
        alert('All items are not removed,pls remove and continue');
    } else {
        window.location = "tst.php";
    }


}

Demo: https://jsbin.com/cukuzeweza/edit?html,js,output

Answer 2

I have made a light version of your code and the rest is left to your development logic.

You have had a lot small problems in your code, like function in JavaScript needed (), the usage of single and double quotes, missing call the JavaScript function etc.

I have created a dummy array for test, but again you could do what you like to achieve your code.

Here is the working solution:

<?php
$cancel = ["checkBox1", "checkBox2", "checkBox3"];

echo "<div><table id='data' class='table'>
        <tr>
            <th></th>
            <th>Document No</th>
        </tr>";

foreach ($cancel as $value)
{
    echo "<tr>";
    echo "<td><input type='checkbox' name='name1' id='$value' onchange='checkIt(\"$value\");' /></td>";
    echo "<td>" . $value . "</td>";
    echo "</tr>";
}
echo "</table></div>";
?>
<script>
    function checkIt(checkBoxId) {
        var x = document.getElementById(checkBoxId).checked;
        console.log("x" + checkBoxId + " is " + x);
    }
</script>

You can see in your console the results of your checkbox.