checkbox全選/反選功能

如下界面是基于layUI提供的結(jié)構(gòu)與樣式,所以要提前引入對(duì)應(yīng)的架構(gòu)包文件

image.png

HTML結(jié)構(gòu)如下：

<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="選項(xiàng)1" title="選項(xiàng)1"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)2" title="選項(xiàng)2"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)3" title="選項(xiàng)3"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)4" title="選項(xiàng)4"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)5" title="選項(xiàng)5"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)6" title="選項(xiàng)6"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)7" title="選項(xiàng)7"></li>
                        <li><input type="checkbox" name="like[HSYC]" lay-skin="primary" value="選項(xiàng)8" title="選項(xiàng)8"></li>
                    </ul>
                </div>
            </div>
        </

JS實(shí)現(xiàn)全選/反選的控制代碼如下：

        <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(); //調(diào)用方法
            });
            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>

效果圖：

全選狀態(tài).png

反選狀態(tài).png

獲取全選中的checkboxvalue值 并存入數(shù)組

                     
           var paramNameArr = []; //將選中的復(fù)選框的值 填入空數(shù)組中
            $("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