prop实现checkbox全选效果

prop(name|properties|key,value|fn)

参数name 描述:

选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");

参数properties 描述:

禁用页面上的所有复选框。

 

$("input[type='checkbox']").prop({disabled: true});

参数key,value 描述:

禁用和选中所有页面上的复选框。

$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

 

<<<<<=============实现示例===============>>>>>

JS代码：

// checkbox全选效果
function CheckAllHosts(self) {
    $(self).parent().parent().next().find('input').prop("checked", $(self).prop("checked"));
    CountSelectedHosts()
}

HTML代码：

{% for group in host_group_obj %}

    <div class="group-list">
       <!--Panel heading-->
        <div class="panel-heading">
            <div class="panel-control">
                <button class="btn btn-default collapsed"><i class="fa fa-angle-down fa-3x"></i></button>
            </div>
            <h6 class="panel-title"><input onclick="CheckAllHosts(this)" type="checkbox" style="margin-right: 5px;">{{ group.name }}</h6>
        </div>

        <!--Panel body-->
        <div id="demo-panel-collapse" class="collapse">
            <!--Disabled borders-->
            <div class="list-group bord-no" style="margin-left: 20px;">
                {% for host in group.host.all %}
                    <a class="list-group-item" href="#"><input class="host_ele" onclick="CountSelectedHosts()" type="checkbox" style="margin-right: 5px" value={{ host.id }}>{{ host.hostname }}</a>
                {% endfor %}
            </div>
        </div>
    </div>

{% endfor %}