全選功能事件解析

1.選中全選框 ->全選
2.取消全選框 ->取消全選
3.選中單個選擇框 ->是否已經所有單個選擇框都選中 ->全選框選中
4.取消單個選擇框 ->全選框取消選中

全選事件的程式碼

//全選事件
$("#check-all").change(function() {
        if ($(this).is(':checked')) {
            $(".check-order").prop("checked", true);
        } else {
            $(".check-order"
 
).prop("checked", false);
        }
    });
    //單個選中或取消
    $(".check-order").change(function() {
        //判斷是否選中
        if ($(this).is(':checked')) {
            var isall = true;
            $(".check-order").each(function(i, val) {
                if (!$(val).is(':checked')) {
                    isall = false
 
;
                }
            });
            //判斷是否已經全選
            if (isall) {
                $("#check-all").prop("checked", true);
            }
        } else {
            $("#check-all").prop("checked", false);
        }
    });

程式碼注意事項

1.jquery判斷是否選中是用is(‘:checked’)；
2.改變選擇框事件的時候，不要 用 .attr(“checked”, “checked”),用prop(“checked”, true);用attr的話，第一次的選擇是有效的，但之後的就沒效了。