Checkboxes Select all

by epinapala

HTML

<div class="col-sm-6">
    <div>
        <ol id="all-scopes">
            <ol>
                <div class="scopeTitle">
                    <input type="checkbox" id="select-all-scopes">Select All Scopes</div>
                <ol class="dd-list">
                    <li>
                        <div class="scopeItem">
                            <input class="checkbox1" type="checkbox" name="check[]" value="https://api.ebay.com/oauth/scope/@public"> <span class="lighter grey">
  https://api.ebay.com/oauth/scope/@public</span>

                        </div>
                    </li>
                    <li>
                        <div class="scopeItem">
                            <input class="checkbox1" type="checkbox" name="check[]" value="https://api.ebay.com/oauth/scope/buy@user"> <span class="lighter grey">
  https://api.ebay.com/oauth/scope/buy@user</span>

                        </div>
                    </li>
                    <li>
                        <div class="scopeItem">
                            <input class="checkbox1" type="checkbox" name="check[]" value="https://api.ebay.com/oauth/scope/social@user"> <span class="lighter grey">
  https://api.ebay.com/oauth/scope/social@user</span>

                        </div>
                    </li>
                    <li>
                        <div class="scopeItem">
                            <input class="checkbox1" type="checkbox" name="check[]" value="https://api.ebay.com/oauth/scope/sell@user"> <span class="lighter grey">
  https://api.ebay.com/oauth/scope/sell@user</span>

                        </div>
                    </li>
                    <li>
                        <div class="scopeItem">
                            <input class="checkbox1" type="checkbox" name="check[]" value="https://api.ebay.com/oauth/scope/merchant@user"> <span class="lighter grey">
  https://api.ebay.com/oauth/scope/merchant@user</span>

                        </div>
                    </li>
         ...

JavaScript

$(document).ready(function () {
    $('body').on('click', '#select-all-scopes', function (event) { //on click 
        if (this.checked) { // check select status
            $('.checkbox1').each(function () { //loop through each checkbox
                this.checked = true; //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox1').each(function () { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });
        }
        alert(getAllSelected());
    });

    $('body').on('click', '.checkbox1', function () {
        alert(getAllSelected());
    });

});

function getAllSelected() {
    var searchIDs = "";
    searchIDs = $("#all-scopes input:checkbox:checked").map(function () {
        if ($(this).val() !== "on") return $(this).val();
    }).get();
    
    if(!searchIDs || searchIDs == ""){
        searchIDs = "None Selected";
    }
    
    return searchIDs;
}