Проверить \ снять все элементы в списке - Visual Studio LightSwitch

Question

Я использую Visual Studio LightSwitch 2015

я добавил Countries Таблица из SQL Server и для каждого Country в списке есть CheckBox

Теперь я разместил CheckBox вверху списка используя 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));

};

Как я могу Select\DeSelect All флажки в списке с одним нажатием кнопки CheckBox в верхней части таблицы?

Любая помощь будет принята с благодарностью.

Answer 1

Хотя приведенный выше пример кода работает, вы можете сделать это быстрее, предполагая, что флажки, которые вы хотите отметить, являются единственными на странице (кроме флажка "проверить все").

Ниже приведены все флажки на странице, кроме "Отметить все".

 $("#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

Answer 2

Вот простой пример из этого поста. Установите / снимите все флажки в jQuery.

$(document).ready(function() {
        $('#select-all').click(function(event) {  
            if(this.checked) { 
                $('.checkitem').each(function() { 
                    this.checked = true;     
                });
            }else{
                $('.checkitem').each(function() {
                    this.checked = false; 
                });        
            }
        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li><label>item-1</label><input name="checkbox-1" id="checkbox-1" type="checkbox" class="checkitem" /></li> 
      <li><label>item-1</label><input name="checkbox-2" id="checkbox-2" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-3" id="checkbox-3" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-4" id="checkbox-4" type="checkbox" class="checkitem"  /></li> 
    </ul>
    <input type="checkbox" name="select-all" id="select-all" /> Check all