05利用jquery实现复选框(checkbox)全选/反选功能

checkbox全选/反选功能

如下界面是基于layUI提供的结构与样式,所以要提前引入对应的架构包文件

image.png

HTML结构如下：

<form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left:10px;">
                    <div class="">
                        <ul id="choose" class="stationlist">
                            <li><input type="checkbox" name="like[QX]" lay-skin="primary" value="全选/反选" title="全选/反选"></li>
                        </ul>
                    </div>
                    <ul id="stationlist" class="query-criteria stationlist">
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项1" title="选项1"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项2" title="选项2"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项3" title="选项3"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项4" title="选项4"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项5" title="选项5"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项6" title="选项6"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项7" title="选项7"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="选项8" title="选项8"></li>
                    </ul>
                </div>
            </div>
        </

JS实现全选/反选的控制代码如下：

        <script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            layui.use(['form'], function() {
                var form = layui.form;
                chechboxChooseAll(); //调用方法
            });
            function chechboxChooseAll() {
                //全选/反选
                $('#choose').on('click', 'li', function() {
                    $("input:checkbox[name='like[HSYC]']").prop("checked", true);
                    layui.form.render('checkbox');
                    //反选
                    if($("input:checkbox[name='like[QX]']").prop("checked") == false) {
                        var item = $("input:checkbox[name='like[HSYC]']");
                        for(var i = 0; i < item.length; i++) {
                            if(item[i].checked == true) {

                                $("input:checkbox[name='like[HSYC]']").prop("checked", false);
                                layui.form.render('checkbox');
                            }
                        }
                    }
                });
            }
        </script>

效果图：

全选状态.png

反选状态.png

获取全选中的checkboxvalue值 并存入数组

                     
           var paramNameArr = []; //将选中的复选框的值 填入空数组中
            $("input:checkbox[name='like[HSYC]']:checked").each(function() {
                paramNameArr.push($(this).val());
            });
            console.log(paramNameArr);

获取选中的值.png

获取全选中的checkboxvalue值 并拼接成字符串

var paramNameArr=""; //定义空的字符串 便于下面的拼接
for(var f = 0; f < paramNameArr.length; f++) {

                paramNameStr += paramNameArr[f] + ","
                    }

                    paramNameStr = paramNameStr.substring(0, paramNameStr.length - 1); //截取 并去掉最后一位

                    console.log(paramNameStr);

如下面的图所示

image.png