爱好选择器

最新推荐文章于 2024-04-26 16:47:03 发布

我是坏人我霸道

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量134

点赞数

分类专栏： jQuery练习文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/qq_44369304/article/details/120121767

版权

jQuery练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用jQuery实现多选框的勾选

效果显示
主要实现以上四个功能

实现中遇到的一点小困难：

在实现那四个按钮时，我用了button来实现。但是点击完相应按钮之后，多选框的√勾上了，又迅速刷新恢复成原样。

后来经过我排查发现，是button这个标签的特性在作怪，后面我把button改成用input的button来实现，就没有出现上面的问题了，因为button标签在表单中相当于input submit，会将表单提交，所以出现前面页面刷新的问题。

button和input button的区别，总结如下

button和input button的区别

##最后附上实现代码
body部分：

<body>
    <form>
        以下哪个是你的爱好？<input type="checkbox" id="selectAll" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="板球" />板球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <input type="checkbox" name="items" value="滑板" />滑板
        <input type="checkbox" name="items" value="溜冰" />溜冰
        <br /><br />
        <input type="button" id="btnAll" value="全选">
        <input type="button" id="btnNot" value="全不选">
        <input type="button" id="btnRe" value="反选">
        <input type="button" id="btnSend" value="提交">
    </form>
</body>

javascript部分：

<script type="text/javascript">
        $(function(){
            //获取全部选项框
            var $checkboxAll = $(':checkbox[name=items]');
            //获取全选/全不选多选框
            var $selectAll = $('#selectAll');
            //alert($checkboxAll[0].value);

            //获取全选按钮
            var $btnAll = $('#btnAll');
            //绑定事件监听
            $btnAll.click(function(){
                //将全部选项框的checked属性改为true
                $checkboxAll.prop("checked",true);
                //将全选/全不选多选框的checked属性改为true
                $selectAll.prop('checked',true);
            })

            //获取全不选按钮
            var $btnNot = $('#btnNot');
            //绑定事件监听
            $btnNot.click(function(){
                //将全部选项框的checked属性改为false
                $checkboxAll.prop("checked",false);
                //将全选/全不选多选框的checked属性改为false
                $selectAll.prop('checked',false);
            })

            //获取反选按钮
            var $btnRe = $('#btnRe');
            //绑定事件监听
            $btnRe.click(function(){
                //将多选框的checked属性改为与原先相反的值
                $checkboxAll.each(function(){
                    this.checked = !this.checked;
                })
                //根据多选框的选择情况改变全选/全不选多选框的checked属性
                //如果多选框勾选数目为0，则全不选
                $selectAll.prop('checked',$checkboxAll.not(':checked').length ===0)
            })

            //获取提交按钮
            var $btnSend = $('#btnSend');
            //绑定事件监听
            $btnSend.click(function(){
                //筛选出多选框的checked属性为true的jQuery对象
                $checkboxAll.filter(':checked').each(function(){
                    alert(this.value);
                })
            }) 

            //点击某个多选框时，根据多选框的勾选状况动态更新全选/全不选多选框的checked属性
            $checkboxAll.click(function(){
                $selectAll.prop('checked',$checkboxAll.not(':checked').length ===0)
            })
        })
    </script>