"SELECT ALL" Checkbox for Values Retrieved by Foreach Loop

Question

I am trying to pass the values from multiple forms.

Reference: Check all/uncheck all in foreach loop

I have checked out a very useful post in SO that enables me to send values to process with a SELECT ALL checkbox.

My values are generated from SQL query in controller thus I am using the codes below:

             <div class="col" id="one">
              <fieldset>
                <form action="{$link->getLink('controller')|escape:'htmlall':'utf-8'}" method="post"> 
                    <p>
                      <input name="ALL" type="checkbox" id="check-all2" value="checkbox" onclick="CheckAll()" />
                      <label>SELECT ALL</label>
                       <br/><br/>
                       {foreach from=$payment item=row}
                       <input type="checkbox" name="payment[]" maxlength="50" value={$row.id_order} class="payment">
                       <label> ID: <b>{$row.id_order}</b></label><br/>
                       {/foreach}
                       <br/>
                      <input id="submit" name="submitpayment" type="submit" value="PACK ITEMS" class="button" />
                    </p>
                  </form>
                </fieldset>
            </div>

jQuery:

  function CheckAll() {
var elements = document.getElementsByName("payment");
var l = elements.length;

if (document.getElementById("check-all2").checked) {
    for (var i = 0; i < l; i++) {
        elements[i].checked = true;
    }
} else {
    for (var i = 0; i < l; i++) {
        elements[i].checked = false;
    }
}

}

This is working currently for me, unfortunately I am unsure how to create for multiple forms.

devsourav · Accepted Answer · 2017-12-13T09:25:09.510

1

Try this:

function CheckAll(className, elem) {
        var elements = document.getElementsByClassName(className);
        var l = elements.length;

        if (elem.checked) {
            for (var i = 0; i < l; i++) {
                elements[i].checked = true;
            }
        } else {
            for (var i = 0; i < l; i++) {
                elements[i].checked = false;
            }
        }
    }

<label>Select all 1</label>
<input type="checkbox" onclick="CheckAll('box1', this)" />

<h2>check boxes</h2>
<input type="checkbox" class="box1" />
<input type="checkbox" class="box1" />
<input type="checkbox" class="box1" />

<hr>

<label>Select all 2</label>
<input type="checkbox" onclick="CheckAll('box2', this)" />

<h2>check boxes</h2>
<input type="checkbox" class="box2" />
<input type="checkbox" class="box2" />
<input type="checkbox" class="box2" />

edited Dec 13 '17 at 09:25

answered Dec 13 '17 at 05:36

devsourav

2,449
1
11
18

Hello @devsourav, for you last step.. do I need to selectively create multiple document.getElementById("ALL").checked by document.getElementById("check-all2").checked? I have multiple separate forms as of now. – Enthu Dec 13 '17 at 06:32
I have tried your codes but it is not selecting the values when I click on SELECT ALL. – Enthu Dec 13 '17 at 06:39
I meant use: `if (document.getElementById("check-all2").checked)` instead of `if (document.getElementById("ALL").checked)` for 2nd form – devsourav Dec 13 '17 at 09:10
if you are working with more than two forms then go on and create unique id for the *select all* elements and change the class names of the check boxes associated with it – devsourav Dec 13 '17 at 09:12
I am testing on one form, it is not working at the moment. I have updated my codes above... Am I missing anything? Yes, I am using multiple separate forms at the moment. – Enthu Dec 13 '17 at 09:20
1

Thank you so much for your help. I am sure this will benefit everyone that is searching for a solution alike. This has tremendously helped me in overcoming the issue. Thank you again for you assistance! Much appreciated. – Enthu Dec 13 '17 at 09:37

"SELECT ALL" Checkbox for Values Retrieved by Foreach Loop

1 Answers1