复选框全部选中/全部取消

最新推荐文章于 2024-04-25 11:38:14 发布

置顶樱梦雪苹宝

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量1.7k

点赞数 1

分类专栏： js样式文章标签： js jquery html

本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/90402983

版权

js样式专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天遇到一个问题记录一下！

问题描述：

js拼接页面，存在复选框，要做一个全部选中，全部取消的操作，使用.arrt("checked","checked")取消选中使用的是removeArrt("checked");虽然实现了选中的效果，但再次点击按钮，却出现了Html中拼接了，页面却没拼接的效果。

查找半天，使用.prop('checked',true);/.prop('checked',false); 实现了效果。

备份一下代码。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的发布</title>
<script src="../../js/jquery-1.12.3.min.js"></script>
<script src="../../js/weixin/myPublish.js"></script>
</head>
<body>

<div align="center" id="divData">
 <table border="1" cellspacing="0" cellpadding="0" >
	 <tbody id='tbody'>
		 <!-- 循环开始 -->
		  <!-- 循环结束 -->
	  </tbody>
 </table>
 </div>

</body>
</html>

//我的发布 activityInitiateUserId:userId
$(function(){ 
	var userId = 1;
	$.ajax({
		  type: 'POST',
		  url: "http://localhost:8080/msgPushActivity/selActAllById",
		  data:{
			  activityInitiateUserId:userId
			  },
		  dataType:"json",
		  success:function (data) {
			var jsonObj = JSON.stringify(data);// 转成JSON格式
			 var result = $.parseJSON(jsonObj);// 转成JSON对象
			 console.log(result);
			 if(result.length>0){//存在数据时，拼接数据
				 var state ="";
				for(var i=0;i<result.length;i++){
					if(result[i].endTime<new Date()){//如果结束时间小于当前时间，状态已过期
						state ="已过期";
					}else{//未过期状态分为：审核通过：0，审核不通过：2，审核中：1
						if(result[i].isVerified==0){
							state ="审核通过";
						}else if(result[i].isVerified==1){
							state ="审核中";
						}else{
							state ="审核不通过";
						}
					}
					var str =  "<tr>"
						+"<td>"
						+"<input type='checkbox' id='"+result[i].activityId+"' value='"+result[i].activityId+"'/>"
						+"</td>"
						+"<td colspan='5'>"
						+"<input type='hidden' value='"+result[i].activityId+"'>"
						+"<p><span>发布时间：</span>"+result[i].createTime+"</p>"
						+"<p><span>活动名称：</span>"+result[i].activityName+"</p>"
						+"<p><span>活动时间：</span>"+result[i].startTime+"-"+result[i].endTime+"</p>"
						+"<p><span>状态：</span>"+state+"</p>"
						+"</td>"
						+"<td><input type='button' name='name' value='查看详情'  onclick='particulars(\""+result[i].activityId+"\")'><br>"
						+"</tr>";
		 		$("#tbody").after(str);
				}
					var v = "<tr>"
						+"<td colspan='7'>"
						+"<input type='radio' id='quanxuan_sign' />" 
						+"<input type='button' id='checkAll' value='全选'  onclick='checkAll()'/>"
						+"<input type='button' value='删除'   onclick='del()' />" 
						+"</td>"
						+"</tr>";
				$("#tbody").after(v);
			 }else{//不存在数据
				 $("#divData").after("暂无数据！");
				/* var str= "<tr align='center'>"
						+"<td colspan='6' >"
						+"<p><span>暂无数据！</span></p>"
						+"</td>"
						+"</tr>";
				 $("#tbody").after(str);*/
			 }
		  }, 
		  error:function () {
	      	window.alert("查询失败");
	    }
		});
});
//全选/取消
function checkAll(){
	if($("#checkAll").val()=="全选"){//按钮：全选
		$('input:checkbox').each(function() { 
		    if (!$(this).prop('checked')) { //状态：未选中
		    	$(this).prop('checked',true);//选中
		    }
		}); 
		$("input:radio").prop('checked',true);//单选按钮选中
		$("#checkAll").val("取消选中");
	}else{//按钮：取消选中
		$('input:checkbox').each(function() { 
		    if ($(this).prop('checked')) { //状态：选中
		    	$(this).prop('checked',false);//取消选中
		    }
		}); 
		$("input:radio").prop('checked',false);//单选按钮选中取消
		$("#checkAll").val("全选");
	}
}
//删除：修改状态
function del(){
	//判断选中哪些数据，进行批量删除/批量更改状态
	$('input:checkbox').each(function() { 
	    if ($(this).prop('checked')) { //状态：选中
	    	var id = $(this).val();
	    }
	}); 
	
}
//查看详情 
function particulars(activityId){
	//跳转详情页
	 window.location.href='viewDetails.html';
}

樱梦雪苹宝

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复选框全部选中/全部取消

今天遇到一个问题记录一下！问题描述：js拼接页面，存在复选框，要做一个全部选中，全部取消的操作，使用.arrt("checked","checked")取消选中使用的是removeArrt("checked");虽然实现了选中的效果，但再次点击按钮，却出现了Html中拼接了，页面却没拼接的效果。查找半天，使用.prop('checked',true);/.prop('checked',...
复制链接

扫一扫