Select all checkboxes from an array within a function

Question

I'm trying to select all checkboxes from my table (check all/uncheck all function) but can't seem to get it right as all solutions I've seen use a form and separate input checkboxes but my code is called from within a function to echo the results of what is stored in my database table. I need the user to be able to check the first checkbox (which currently does nothing) and thus result in all other checkboxes being selected. Please can someone assist me in how I can get this to work, here is the code I've been trying to implement using php and jquery:

function BuildPersonResultTable($result){
        $personTable= "<table id='main-db' border='1'>";
        $personTable= $personTable . "<tr>";
        $personTable= $personTable . "<th><input type='checkbox' class='chk_boxes' /></th>";
        $personTable= $personTable . "<th>ID</th>";
        $personTable= $personTable . "<th>First Name</th>";`
        $personTable= $personTable . "<th>Surname</th>";
        $personTable= $personTable . "<th>E-mail</th>";
        $personTable= $personTable . "<th>Phone Number</th>";
        $personTable= $personTable . "<th>Parent</th>";
        $personTable= $personTable . "<th>Volunteer</th>";
        $personTable= $personTable . "<th>Business Contact</th>";
        $personTable= $personTable . "<th></th>";
        $personTable= $personTable . "<th></th>";

        $personTable= $personTable . "</tr>";
        while($row = mysqli_fetch_array($result))
        {
            $personTable= $personTable . BuildPersonResultRow($row);

        }

        $personTable= $personTable . "</table>";
        return $personTable;
    }

    function BuildPersonResultRow($row){
            $personTableHtml = "<tr>";
            $personTableHtml = $personTableHtml . "<td width='60px' id='chooseSender'>";
            $personTableHtml = $personTableHtml . "<input type='checkbox' class='chk_boxes1' name='id_list[]' value='" . $row['id'] ."'/>";
            $personTableHtml = $personTableHtml . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . $row['id'] . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . $row['name']  . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . $row['surname'] . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . $row['email'] . "</td>";
            $personTableHtml = $personTableHtml .  "<td width='70'>" . $row['alt_contact'] . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . boolToYesNo($row['parent']) . "</td>";
            $personTableHtml = $personTableHtml .   "<td>" . boolToYesNo($row['volunteer']) . "</td>";
            $personTableHtml = $personTableHtml .  "<td>" . boolToYesNo($row['business']) . "</td>";
            $personTableHtml = $personTableHtml . '<td><a class= "side-btns" href="edit.php?id=' . $row['id'] . '">Edit</a></td>';
            $personTableHtml = $personTableHtml . '<td><a class= "side-btns" href="delete.php?id=' . $row['id'] . '">Remove</a></td>';
            $personTableHtml = $personTableHtml .  "</tr>";

            return $personTableHtml;
        };

And the HTML code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/DbCSS.css">
 <script type="text/javascript" src="jquery-1.6.4.min.js">
 $('.chk_boxes').click(function(){
    var chk = $(this).attr('checked')?true:false;
    $('.chk_boxes1').attr('checked',chk);
});
 </script>
</head>

I think you may need to use the .on() in jquery to delegate your click event. This is because you are trying to add an event to an element that you are appending to the dom. I have noticed in older versions of jQuery that I had to use .live() or .bind() to handle these events. — osekmedia
– osekmedia, Commented Oct 24, 2014 at 23:37

AlexL · Accepted Answer · 2014-10-24 22:40:31Z

1

You will need to wait for the DOM to finish loading in order for your JS code to be aware of the checkboxes.

Something like this (place it in the head or body, doesn't matter):

<script type="text/javascript">
    $(document).ready(function(){
        $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',$(this).is(':checked'));
        }
    });
</script>

edited Oct 24, 2014 at 22:40

answered Oct 24, 2014 at 22:32

AlexL

1,70713 silver badges22 bronze badges

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

2 Comments

David Thomas Over a year ago

Changing the attribute (attr()) doesn't update the property; use prop(), and please don't use $(this).is(':checked'), just use .prop('checked', this.checked)

AlexL Over a year ago

True but in case of the "checked" property jQuery handles the attribute the same way as the property. So my code still works even though is not 100% correct if we go deep into the details and standards that are not asked here.

st3lz · Accepted Answer · 2014-10-25 14:35:42Z

0

For those who may need help with this in future, I ended up using this code and it now works perfectly:

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $('.chk_boxes').click(function(){
    $('.chk_boxes1').prop('checked', this.checked);
  });
});
</script>
</head>

answered Oct 25, 2014 at 14:35

st3lz

497 bronze badges

Collectives™ on Stack Overflow

Select all checkboxes from an array within a function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related