Check\Uncheck all the items in the List - Visual Studio LightSwitch

Question

I am using Visual Studio LightSwitch 2015

I have added Countries Table from SQL Server and for each Country in the List, I have CheckBox

Now I have placed a CheckBox at the top of the List Using Custom Control

myapp.Countries.CheckAll_postRender = function (element, contentItem) {

var checkbox = $("<input type='checkbox'/>")
        .css({
            height: 20,
            width: 20,
            left:-26,
            margin: "45px"
        })
        .appendTo($(element));

};

How can I Select\DeSelect All the CheckBoxes in the List with single Click of the CheckBox at the top of the Table?

Any help would be greatly appreciated.

Answer 1

Although the above code example works, you can actually do it faster assuming the checkboxes you want to check are the only ones on the page (besides the "check all" checkbox).

The below checks all checkboxes on the page except the "Check All" one.

 $("#checkAll").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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