首页 > 其他分享 >js处理前端页面复选框多页复选同时生效的问题

js处理前端页面复选框多页复选同时生效的问题

时间:2023-11-14 19:45:17浏览次数:37  
标签:checkbox checked name js window notCheckRecordId var 多页 复选框

虽然是后端开发,但在实际的工作中难免会碰到一些前端相关的任务需要自己处理,下面就是本人开发工作中处理的前端相关分页复选的问题。总结一下,以备日后重复遇到:
<script type="text/javascript">
//初始化数据
$(function () {

$('#queryButton').removeAttr('disabled');

var ischeckedAll = window.sessionStorage.getItem("ischeckedAll");
//代表全选
if (ischeckedAll != null && ischeckedAll == 1) {
$('#checkbox-all').attr("checked", "checked")
        // 初始化的时候如果是全选,则将当前页的复选框全部置true
$(":checkbox[name='checkbox']").attr('checked', "checked");

var item = window.sessionStorage.getItem("notCheckRecordId");
if (item != null) {
$('input:checkbox:checked').each(function () {
//如果剔除的数据中包含当前页的选中数据则将选中数据置false
var recordId = $(this).closest("tr").find("td").eq(0).find("input[name='recordId']").val();
// console.log(recordId);
if (new String(item).lastIndexOf(new String(recordId)) > 0) {
$(this).prop('checked', false);
}
;
});
}
}

});

//点击查询时清空session 中的数据
$('#queryButton').click(function () {
window.sessionStorage.clear();
});

//发起批量调账(操作实例:如果没勾选全选则传递的是当前页的选中的需要处理的数据的id集合,不管其他页有没有勾选;如果选中了全选按钮则传递的参数包含:全选标识、剔除id、和当前的所有查询条件 注:后端会根据条件查询所有数据然后根据剔除id剔除掉不满足的数据进行下一步操作)
$('#manualAsk').click(function () {
var ischeckedAll = window.sessionStorage.getItem("ischeckedAll");

if (ischeckedAll == null) {
ischeckedAll = 3;
}
if ($('input[name="checkbox"]:checked').length == 0) {
alert('<%=getString("请选择需要补单的订单")%>!');
return;
}

//拿到勾选的值
var recordIdArr = new Array();
// var recordIdArrNo = new Array();
//循环所有选中的值 拿到行
$('input[name="checkbox"]:checked').each(function (index, element) {
//追加到数组中
recordIdArr.push($(this).closest("tr").find("td").eq(0).find("input[name='recordId']").val());
});
var notCheckRecordId = new Array(window.sessionStorage.getItem("notCheckRecordId"));

console.info("selectValue:" + recordIdArr)
console.info("cancelValue:" + notCheckRecordId)
// var content = {
// recordIdList: JSON.stringify(recordIdArr)
// };

$.ajax({
url: "<%=basePath%>" + "/BillDanBill",
data: "record_id=" + recordIdArr + "&notCheckRecordId=" + notCheckRecordId + "&ischeckedAll=" + ischeckedAll + "&id=<%=id%>&MerOrderNO=<%=MerOrderNO%>&card_bin=<%=card_bin%>&trade_type=<%=trade_type%>&trade_no=<%=trade_no%>&arn=<%=arn%>&refund_id=<%=refund_id%>&merno=<%=merno%>&authorization_code=<%=authorization_code%>&reconciliation_result=<%=reconciliation_result%>&status=<%=status%>&startTime1=<%=startTime1%>&startTime2=<%=startTime2%>&endTime1=<%=endTime1%>&endTime2=<%=endTime2%>",
type: "get",
async: false,
success: function (data) {
if (data == 1) {
alert('<%=getString("操作成功!")%>');
// history.back(-1);
// window.open('err_account_detail.jsp?', '_self');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('<%=getString("处理失败,请重试!")%>');
}
});
});

//全选和反选事件(点击全选按钮移除session中的剔除数据,并将当前页的复选框置为true)
$("#checkbox-all").click(function () {
$(":checkbox[name='checkbox']").prop('checked', this.checked);

window.sessionStorage.removeItem("notCheckRecordId");

var isCheckedAll = 0;
if (this.checked) {
isCheckedAll = 1;
}
window.sessionStorage.setItem("ischeckedAll", isCheckedAll);

});

//全选与单选的关系(就是将取消的复选框数据的id存到session中,选中的id从session中删除)
$("input[name='checkbox']").click(function () {
// $("#checkbox-all").prop("checked", $("input[name='checkbox']").length == $("input[name='checkbox']:checked").length);
if (!this.checked) {
var notCheckRecordId = new Array(window.sessionStorage.getItem("notCheckRecordId"));
if (notCheckRecordId != null) {
notCheckRecordId.push($(this).closest("tr").find("td").eq(0).find("input[name='recordId']").val());
// $.session.set("notCheckRecordId",notCheckRecordId);
window.sessionStorage.setItem("notCheckRecordId", notCheckRecordId);
} else {
var notCheckRecordId1 = new Array();
notCheckRecordId1.push($(this).closest("tr").find("td").eq(0).find("input[name='recordId']").val());
window.sessionStorage.setItem("notCheckRecordId", notCheckRecordId1);
}
} else {
var notCheckRecordId = window.sessionStorage.getItem("notCheckRecordId");
if (notCheckRecordId != null) {
var repeatValue = $(this).closest("tr").find("td").eq(0).find("input[name='recordId']").val();
notCheckRecordId = notCheckRecordId.replace(repeatValue.toString(), "");
window.sessionStorage.setItem("notCheckRecordId", notCheckRecordId);
}
}
});
</script>

标签:checkbox,checked,name,js,window,notCheckRecordId,var,多页,复选框
From: https://www.cnblogs.com/sunyonggao/p/17832361.html

相关文章

  • 深入理解JMeter中的JSON Extractor
    ApacheJMeter是一款出色的开源性能和功能测试工具,这款工具提供了丰富的功能和强大的扩展性,可以应对各种复杂的测试需求。当我们在进行接口测试时,经常会遇到需要从接口响应中提取信息并在后续请求中使用的情况。这时候,JMeter中的JSONExtractor就派上了用场。JSONExtractor是JMe......
  • js 大文件分割/分片上传
    <!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>uploadFile</title><style></style></head><body>&......
  • WebGL_0019:three.js 欧拉角和四元数
    1,这篇说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法。1.欧拉角(Euler)欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法1.set(x:number,y:number,z:......
  • JavaScript - js生成 txt 文件
    JavaScript-js生成txt文件/***方法定义*/functiondownload(filename,text){varelement=document.createElement('a');element.style.display='none';varcontent=encodeURIComponent(text);element.setAttribute('href&#......
  • JSON.stringify
    当使用JSON.stringify函数时,第二个参数是一个数组或一个函数,用于控制序列化过程中对象的属性。第三个参数是一个用于控制缩进的数字或字符串,用于美化输出的可选参数。让我们通过一个例子来说明:假设我们有以下JavaScript对象:constperson={name:'John',age:30,a......
  • vuejs3.0 从入门到精通——Pinia——定义Store
    定义Store Store是用defineStore()定义的,它的第一个参数要求是一个独一无二的名字:import{defineStore}from'pinia'//你可以对`defineStore()`的返回值进行任意命名,但最好使用store的名字,同时以`use`开头且以`Store`结尾。(比如`useUserStore`,`useCartStore......
  • js实现大文件上传——分片上传方法
    当前端在开发过程中遇到上传文件需求,如果是上传头像、图片小文件之类的,可以正常按上传流程处理。但是当遇到上传大文件需求时,几个G或者十几个G,那么需要将这么大的文件分割成许多小片段分别上传,这种实现思路称为分片上传。实现分片上传,精髓就是将文件分割成小片段,此时我们需要用到......
  • js 计算两个地点坐标之间的间距
    /***计算两个地点坐标之间的间距*@param{array}location1[lon:string,lat:string]地点坐标*@param{array}location2[lon:string,lat:string]地点坐标*/exportfunctioncalculateDistance(location1,location2){ constearthRadius=6371//地球半......
  • 原生JS实现视频截图
    视频截图效果预览利用Canvas进行截图要用原生js实现视频截图,可以利用canvas的绘图功能ctx.drawImage,只需要获取到视频标签,就可以通过drawImage把视频当前帧图像绘制在canvas画布上。constvideo=document.querySelector('video')constcanvas=document.createElement('c......
  • 表格数据拖拽排序 sortable.js
    需求拖拽表格的行数据,实现排序。问题拖拽后调用接口,但视图没变,还是原来的顺序场景:拖拽表格行数据后,tableDataArr中数据的orderNum值会改变,实现拖拽换序。期望情况:页面根据更改后的orderNum重新排序。实际情况:接口数据变了,但是页面行数据没有改变。也就是说,页面没有实现......