Check\Uncheck 列表中的所有项目 - Visual Studio LightSwitch

Question

我正在使用 Visual Studio LightSwitch 2015

我已经从 SQL 服务器添加了 Countries Table，对于列表中的每个 Country，我都有 CheckBox

现在我使用 Custom Control

在列表顶部放置了一个 CheckBox

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

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

};

如何通过单击 Table 顶部的 CheckBox 来 Select\DeSelect All 列表中的复选框？

如有任何帮助，我们将不胜感激。

Answer 1

这是一个简单的例子 post Check/Uncheck all the checkboxes in 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

Answer 2

尽管上面的代码示例有效，但如果页面上只有您要选中的复选框（"check all" 复选框除外），您实际上可以更快地执行此操作。

下面检查页面上除 "Check All" 之外的所有复选框。

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

Check\Uncheck 列表中的所有项目 - Visual Studio LightSwitch

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

javascript

c#

jquery

visual-studio-lightswitch