input[type=checkbox]使用说明

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(){ 

    });

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值