Js复选框支持翻页

最新推荐文章于 2023-09-22 19:38:43 发布

Allen_Heng

最新推荐文章于 2023-09-22 19:38:43 发布

阅读量326

点赞数

分类专栏：前端文章标签： java js

本文链接：https://blog.csdn.net/Allen_Heng/article/details/120531758

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何在使用JavaScript处理复选框时，确保用户的选择在页面翻页或刷新后仍然保留。关键在于后台需要传递并保存用户的旧值，这些值（oldvalues）用于恢复页面状态。

摘要由CSDN通过智能技术生成

翻页刷新页面时需要后台传递值后台值为 oldvalues

// 初始化页面数据  
var text = ''
        $(document).ready(function () {
            text =  $("#checkedValue").val();
            if (top.mainFrame.cmsMainFrame) {
                top.mainFrame.cmsMainFrame.texts = text;
            } else {
                top.mainFrame.texts = text;
            }
        });

 function getText() {
//  获取所有checkbox 且名称为checkboxname的 元素  
$('input[type=checkbox][name="checkboxName"]');
//  获取原始数据
 var oldValue = $("#checkedValue").val();
 text = '';
//  判断原始值是否为空
 if (oldValue) {
                // 将原来元素转换为数组  因为oldValue可能由单元素所以添加,构建数组
                oldValue = oldValue+","
                array = oldValue.split(',')
                // 数组删除元素 去除当前页面的所有元素
                ids.each(function () {
                    temp = $(this).val();
                    array.remove(temp)
                });
                // 将当前页选中的元素添加到数组
                $('input:checkbox[name="checkboxName"]:checked').each(function () {
                    array.push($(this).val()) ;
                });
                // 去除数组中的空元素 设置text 和 选中值的value
                array = trimSpace(array)
                text = array.toString();
                $("#checkedValue").val(text);

            } else {
                // 如果没有历史数据则对数组直接添加  组成字符串返回
                ids.each(function () {
                    //获取当前元素的勾选状态
                    if ($(this).prop("checked")) {
                        text = text + $(this).val() + ",";
                    }
                });
                //去最后的 ，
                text = text.substring(0, text.length - 1);
                $("#checkedValue").val(text);
            }

            // 获取 jbox 上级页面赋值 
             if (top.mainFrame.cmsMainFrame) {
                 top.mainFrame.cmsMainFrame.texts = text;
             } else {
                 top.mainFrame.texts = text;
             }
     
 }

 //  全选 
function checkAll() {
            var checkDom = $("#checkboxId");
            if ($(checkDom).is(':checked')) {
                $('input:checkbox[name=checkboxName]').prop('checked', true);
            } else {
                $('input:checkbox[name=checkboxName]').prop('checked', false);
            }
            getText();
        }

        // 获取数组元素角标方法
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        // 删除方法
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
            // 删除方法
                this.splice(index, 1);
            }
        };
        // 去除数组中的空元素
        function trimSpace(array){
            for(var i = 0 ;i<array.length;i++)
            {
            // 判断元素是否为空方法
                if(array[i] == "" || array[i] == null || typeof(array[i]) == "undefined")
                {
                    array.splice(i,1);
                    i= i-1;
                }
            }
            return array;
        }

// 全选框      点击调用checkAll方法
<th style="text-align:center; width: 30px">
            <input type="checkbox" οnchange="checkAll()" id="checkboxId" value="1"/>
</th>

// 复选框初始化值
<c:forEach items="${page.list}" var="bean">
        <tr>

            <td style="text-align:center;">
                // 判断元数据中是否有 初始化数据 有则选中   点击时调用getText方法
                <c:if test="${fn:contains(ttTzywAddr.checkedValue, bean.addrCode)}">
                    <input type="checkbox" id="checkbox" οnclick="getText()" name="checkboxName"
                           value="${bean.addrCode}" checked='checked'/>
                </c:if>
                <c:if test="${!fn:contains(ttTzywAddr.oldValues, bean.addrCode)}">
                    <input type="checkbox" id="checkbox" οnclick="getText()" name="checkboxName"
                           value="${bean.addrCode}"/>
                </c:if>

            </td>