js 在网站前台 批量选择 checkbox (包括全选 取消全选 和指定选择)

	需求是 在自己搭建的网站页面中 利用jquery加载出一些数据 然后利用input的checkbox 选择指定的数据做删除功能
	以下都是测试数据:(第一次做相关功能,勿喷。。)
	下面贴上部分代码:
			var html="";
  			html += '  <tr>';
  			html += '  <td><input type="checkbox" value="'+data.rows[i].readId+'" name="checkboxR" 		  class="com_Release_job_qx_check" style="margin-top:2px;"></td> ';
  			html += '  <td align="center"><a href="#" class="com_bth" onclick=deleReadResume('+data.rows[i].readId+')>删除</a></td> ';  
        	html += ' </tr>';
        	$("#newlistRead").append(html);

		var html_check ='';
		html_check += '<tr> ';
		html_check += '<td colspan="8" class="table_end"> ';
		html_check +='<div>';
		html_check +=' <div class="com_Release_job_bot">';
		html_check +='<span class="com_Release_job_qx"><input id="checkAllR" name="check" type="checkbox" class="com_Release_job_qx_check" onclick="checkAllR()">全选</span>';
		html_check +=' <input class="c_btn_02 fl" type="button" name="subdel" value="批量删除" onclick="deleReadResumeAll()">';
		html_check +='</div>';
		html_check +='</div>';
		html_check += '</td>';
		html_check += '</tr>';
    	$("#newlistRead").append(html_check);

 // 浏览简历 全选和取消全选按钮 
var count = 0; //定义 点击 全选按钮的次数
function checkAllR(){
	count++;
	if(count%2 != 0){ //如果为奇数次 则为全选中
		$('#checkAllR').attr('checked',true);
	       	 if (this.checked) {//全不选中
		               // $("input:checkbox").each(function () {
		                $("input[name='checkboxR']").each(function () {
		                	 $(this).prop("checked", false);
		                });
	         	 } else {//全选中 执行它
		                $("input[name='checkboxR']").each(function () {
		               	 $(this).prop("checked", true);
		                });
	       	 }
	}else{//如果为偶数次 则为全选中
		$('#checkAllR').attr('checked',false);
	       	 if (this.checked) {//全选中
		            $("input[name='checkboxR']").each(function () {
		                $(this).prop("checked", true);
		            });
	         	 } else {//全不选中 执行它
		            $("input[name='checkboxR']").each(function () {
		                $(this).prop("checked", false);
		            });
	       	 }
	}
}
	
//浏览简历 点击批量删除 的提示  
var check_val = [];//定义一个数组
function deleReadResumeAll(){
	check_val = [];//每次点击批量删除时 把之前数组中的值清空
	obj = document.getElementsByName("checkboxR");//通过input checkbox的name 获取到相关的value值(选几个 获取几个)
	for(k in obj){ //获取到的value多个值 循环
		if(obj[k].checked){  //判断哪个box被选中
			check_val.push(obj[k].value); //选中的把值放到数组中
		}
	}
	//alert("check_val:"+check_val);
	if (check_val =='') {
		alert("请选择要删除的记录!");
		return;
	}
	var r=confirm("确定删除选择浏览简历的记录吗?");
    if (r==true){
    	getDeleReadResumeAll();
    }else{
        return;
    }
}

//批量删除
function getDeleReadResumeAll(){
		alert(check_val);
		var groups=check_val.join(",");
		$.ajax({
            url:'url,
            data: {readIds:groups}, 
            type:'post',
            success:function(data){
            	location.reload();//刷新当前页
            },
            error:function(data){
                alert("网络异常!");
            }
        });
}

最后就可以各种点击 各种取消了~

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值