jQuery ＞实现全选、全不选和反选

最新推荐文章于 2022-09-30 14:03:53 发布

我发在否

最新推荐文章于 2022-09-30 14:03:53 发布

阅读量276

点赞数

分类专栏： jQuery 文章标签： jQuery checkbox 全选全不选反选 JavaScript

本文链接：https://blog.csdn.net/qq_33067925/article/details/80900779

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

廖雪峰官网的jQuery例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/plugins/jquery-1.9.1.js"></script>
    <script src="js/selectAll.js"></script>
</head>

<body>
    <form id="test-form" action="#">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <p>
                <label class="selectAll">
                    <input type="checkbox">
                    <span class="selectAll">全选</span>
                    <span class="deselectAll">全不选</span>
                </label>
                <a href="#0" class="invertSelect">反选</a>
            </p>
            <p>
                <label><input type="checkbox" name="lang" value="javascript"> JavaScript</label>
            </p>
            <p>
                <label><input type="checkbox" name="lang" value="python"> Python</label>
            </p>
            <p>
                <label><input type="checkbox" name="lang" value="ruby"> Ruby</label>
            </p>
            <p>
                <label><input type="checkbox" name="lang" value="haskell"> Haskell</label>
            </p>
            <p>
                <label><input type="checkbox" name="lang" value="scheme"> Scheme</label>
            </p>
            <p>
                <button type="submit">Submit</button>
            </p>
        </fieldset>
    </form>
</body>

</html>

$(function(){
    'use strict';
    var
        form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        selectAllLabel = form.find('label.selectAll span.selectAll'),
        deselectAllLabel = form.find('label.selectAll span.deselectAll'),
        invertSelect = form.find('a.invertSelect')
    ;
    // 重置初始化状态:
    form.find('*').show().off();
    form.find(':checkbox').prop('checked', false).off();
    deselectAllLabel.hide();
    // 拦截form提交事件:
    form.off().submit(function (e) {
        e.preventDefault();
        alert(form.serialize());
    });


    var flag = false;//是否是全选状态,因为全选和全不选共用选择框
    selectAll.change(function () {
        if ($(this).prop("checked")) {
            if (flag) {//全选变全不选
                langs.prop("checked", false);
                flag = false;
                selectAllLabel.show();
                deselectAllLabel.hide();
            } else {//全不选变全选
                langs.prop("checked", true);
                flag = true;
                selectAllLabel.hide();
                deselectAllLabel.show();
            }
        }
        selectAll.prop("checked", false);//文字变反，选择也相应变反
    });

    invertSelect.click(function () {
        // for (var i = 0; i < langs.length; i++) {
        //     langs.eq(i).prop("checked", !(langs.eq(i).prop("checked")));
        //     langs.eq(i).change();
        // }
        //jQuery可群组操作，简化上面的代码
        langs.each(function(n){
            $(this).prop( "checked", !($(this).prop("checked")) ).change();
        })
    });

    langs.change(function () {
        if ($('input[name="lang"]:checked').length == 5) {
            //已全选，显示“全不选”
            selectAllLabel.hide();
            deselectAllLabel.show();
            //已全选，可全不选
            flag = true;
            selectAll.prop("checked", false);
        } else {
            //未全选，显示“全选”
            selectAllLabel.show();
            deselectAllLabel.hide();
            //未全选，可全选
            flag = false;
            selectAll.prop("checked", false);
        }
    });

});