CODEWITHSUNDEEP
javascriptphpjquery
xarj
xarj

Reputation: 39

jQuery check 2 checkboxes in a PHP foreach's loop

I have a javascript's script which allow to check 2 checkboxes with the same values at the same time but it doesn't work.

I get the values from a databases thanks to a php's foreach loop. Here is my test code:

    <?php
            //checkboxes
            foreach($host1 as $row){
                echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
            }
            foreach($host1 as $row){
                echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
            }
           //script
           foreach($host1 as $row){ ?>
            <script type="text/javascript">
           var $checkboxes = $("input[type=checkbox][name='list[]'][value='<?php echo $row['table']?>']");
                $checkboxes.on("click", function() {
                var checkedState = this.checked
                $checkboxes.each(function() {
                    this.checked = checkedState;
            });
           });
            </script>
<?php    }

If I change the value $row['table'] into a simple number, "2" for example, it's working. I also look if the values ($row['table']) of every checkboxes are the same and they are all good.

Strange thing : When I check any checkboxes, it will not check the corresponding ones, but it will instead check the lasts of the table.

Any ideas where is my mistake ?

Thank you ;)

Upvotes: 0

Views: 962

Answers (2)

M Hussain
M Hussain

Reputation: 381

You should try this. I think this is what you want

<?php
//checkboxes
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
//script
?>
<script type = "text/javascript">
    $(document).ready(function () {

        $(".my_cb").on("click", function () {
            var val = $(this).val();
            var checkboxes = $("input[type=checkbox][name='list[]'][value='"+val+"']");
            var checkedState = this.checked;
            checkboxes.each(function () {
                this.checked = checkedState;
            });

        });
    });
</script>

Upvotes: 2

Pete
Pete

Reputation: 58422

Instead of doing a php loop and assigning each click event separately, let jQuery handle that:

// this selector should get all your checkboxes
var checkboxes = $("input[type=checkbox][name='list[]']");

checkboxes.click(function() {
     // not sure what you are trying to do here but it just looks like you are trying to set all checkboxes to the same state as the current one
     checkboxes.prop('checked', this.checked);
});

Update

As you only have 2 list of checkboxes with the same name, I have shown options for if they have different parent elements or the same parent element

JS:

var list = $('.parent-element').find("input[type=checkbox][name='list[]']"),
    list1 = $('.parent-element1').find("input[type=checkbox][name='list[]']");

list.click(function() {
  var checkbox = $(this),
      thisIndex = list.index(checkbox);

   list1.eq(thisIndex).prop('checked', this.checked);

   // if at all possible I would use the above index to change the corresponding checkbox in the other list.

   // if all checkboxes are under the same parent then you will only have list (list1 won't be needed) 
   // and it will contain all children so to get the corresponding index you would need to do:

   var thisIndex = list.index(checkbox) + (list.length / 2);
   list.eq(thisIndex).prop('checked', this.checked);

});

Upvotes: 2

Related Questions