html代码段:

<div>
            <label class="labelAll">
                <input type="checkbox" name="test" value="全选" checked="checked"/>全选</label>
            <label class="labelOne">
                <input type="checkbox" name="test" value="今天星期一" checked="checked"/>今天星期一</label>

            <label class="labelOne">
                <input type="checkbox" name="test" value="今天星期二" checked="checked"/>今天星期二</label>

            <label class="labelOne">
                <input type="checkbox" name="test" value="今天星期三" checked="checked"/>今天星期三</label>

            <label class="labelOne">
                <input type="checkbox" name="test" value="今天星期四" checked="checked"/>今天星期四</label>

            <label class="labelOne">
                <input type="checkbox" name="test" value="今天星期五" checked="checked"/>今天星期五</label>
        </div>
        <button onclick="SubmitCheckBox()">提交</button>

Script代码段:

<script type="text/javascript">
        $(function () {
            // 全选、反选
            $('.labelAll input').click(function (event) {
                if ($(this).attr('checked')) {
                    $(this).attr('checked', false);
                    $(".labelOne input").attr({ 'checked': false })
                    $(".labelOne input").prop({ 'checked': false })
                } else {
                    $(this).attr('checked', true)
                    $(".labelOne input").attr({ 'checked': true })
                    $(".labelOne input").prop({ 'checked': true })
                }
            })

            // 单个选择
            $(".labelOne input").click(function (event) {
                var flag = false;
                if ($(this).attr('checked')) {
                    $(this).attr('checked', false);

                } else {
                    $(this).attr('checked', true)

                }
                $('.labelOne input').each(function (index, val) {
                    if ($(val).attr('checked')) {
                        flag = true;
                    } else {
                        flag = false;
                        return false;
                    }
                });
                if (flag) {
                    $('.labelAll input').attr('checked', true);
                    $('.labelAll input').prop('checked', true);
                    console.log(flag);
                } else {
                    $('.labelAll input').attr('checked', false);
                    $('.labelAll input').prop('checked', false);
                    console.log(flag);
                }
            });
        })

        function SubmitCheckBox() {
            var chk_value = [];
            $('input[type="checkbox"]:checked').each(function () {
                chk_value.push($(this).val());
            });
            alert(chk_value.length == 0 ? '你还没有选择任何内容!' : chk_value);
        }

    </script>

如果checkbox的内容是从接口请求过来动态生成的,则需要将全选/反选,单个选择框使用下面这种绑定方式:

$(document).on('click','selector',function(){ 

    });

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐