SO - 18537609

by Amir Danish

HTML

<!-- <input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" id="checkItem">Item 1
<input type="checkbox" id="checkItem">Item 2
<input type="checkbox" id="checkItem">Item3
 -->

<div class="col">
     <fieldset>
          <form> 
            <p>
              <input type="checkbox" class="select-all" name="payment[]" value="22">
                <label> SELECT ALL</label>
                <br/><br/>
              <input type="checkbox" name="payment[]" maxlength="50" value="a">
                <label> ID: <b>A</b></label><br/>
              <input type="checkbox" name="payment[]" maxlength="50" value="b">
                <label> ID: <b>B</b></label><br/>
              <input id="submit" name="submitinprogress" type="submit" value="PACK ITEMS" class="button" />
             </p>
         </form>
     </fieldset>
</div>

JavaScript

$("#checkAll").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });
 
 
 
 $(document).ready(function() {
    $(".select-all").change(function () {
        $(this).siblings().prop('checked', $(this).prop("checked"));
        let inputs = $(this).siblings("input[type=checkbox]");
        let output = [];
        for(let i = 0; i < inputs.length; i++){
            output.push(inputs[i].value);
        };
        console.log(output);    // ["a", "b"]
    });
});