jQuery check 2 checkboxes in a PHP foreach's loop

Question

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 ;)

Are you sure you want your javascript to be added within a PHP loop? You're adding the same JS n number of times. — Marc
– Marc, Commented Mar 31, 2017 at 14:13
Why do you have two php foreach loops? The point of a foreach is that you use one to loop through EACH item. — Stan Alachniewicz
– Stan Alachniewicz, Commented Mar 31, 2017 at 14:14
What is that javascript doing? You've got a loop so checkboxes is getting overwritten with each interaction. You're also binding to that event multiple times but since you're outputting it all with PHP in the end it only gets bound once. — Matt
– Matt, Commented Mar 31, 2017 at 14:16
If you add the rendered html to an example on jsfiddle.net, it'll probably become apparent to us what your problem is very quickly. — Marc
– Marc, Commented Mar 31, 2017 at 14:17

M Hussain · Accepted Answer · 2017-03-31 17:47:25Z

2

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>

answered Mar 31, 2017 at 17:47

M Hussain

3811 gold badge2 silver badges14 bronze badges

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

3 Comments

M Hussain Over a year ago

The problem in your code is with $checkboxes variable. Everytime foreach runs, it overrides its value. Thats why it checks only last checkbox in the end.

M Hussain Over a year ago

You can replace $(".my_cb").on( with $("input[type=checkbox][name='list[]']").on( if you don't want to use a class

xarj Over a year ago

Wow, thank you it's working ! The problem solved when I added $(document).ready(function () ). I will use your code tho since it doesn't use a php's loop and more easy to understand. Thanks ;)

Pete · Accepted Answer · 2017-03-31 14:45:19Z

2

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);

});

edited Mar 31, 2017 at 14:45

answered Mar 31, 2017 at 14:19

Pete

58.8k31 gold badges132 silver badges187 bronze badges

6 Comments

xarj Over a year ago

Hey, I don't want to check all of them. I want to check them by values, so 2 at the same time for my code example. This is why I need the foreach loop, because the value is from a db

Pete Over a year ago

I'm guessing you haven't written your loops correctly then, does the second checkbox list have a different name?

xarj Over a year ago

No same name, the problem come when I use an array.

Stan Alachniewicz Over a year ago

Could be the values you're pulling from the database are not what you think, have you tried a var_dump()?

Pete Over a year ago

so your going to be using the same name checkbox and posting the same value twice? Doesn't make any sense, also what happens if other checkboxes has the same value so you may end up with 4 checkboxes with the same value? Are these checkbox lists on different parts of your page with different parent elements?

|

Collectives™ on Stack Overflow

jQuery check 2 checkboxes in a PHP foreach's loop

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related