您的位置：首页 > Web前端 > JQuery

jQuery、html、JavaScript实现全选、反选、批量删除

2018-01-07 20:57 736 查看

方式一：重点内容

<input type="button" onclick="delAll()" value="批量删除" />
<input type="button" onclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" onclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
<script>

//全选
function cheAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name='ck']");
for(var i = 0; i < ck.length; i++){
ck[i].checked = cek;
}
}

//反选
function che(){
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
}

//批量删除
function delAll(){
var ck = $("input:checked[name='ck']");
if(ck.length == 0){
alert("请选择,然后进行删除");
return;
}
var f=confirm("确认删除!!");
if(!f){
return;
}
for(var i = 0; i < ck.length; i++){
ck[i].parentNode.parentNode.remove();
}
}
</script>

方式二：

<script type="text/javascript">
//全选的功能
function allcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=true;//true代表选中
}
}

//全不选
function allnotcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=false;//false代表不选
}
}
//反选
function backcheck(){//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
if(c.checked==true){//如果当前的checkbox是选中的则不让其选中
ck[i].checked=false;
}else{
ck[i].checked=true;
}
}
}

//批量删除
function alldel(){
var f=false;
//得到要删除的主键id
var arr=[];//用于存要删除的选中的id值

var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
if(ck[i].checked==true){//代表选中
arr.push(ck[i].value);
f=true;
}
}

//alert(arr);
//跳到删除的servlet里去
if(f==true){
if(confirm("您确认要删除吗？"))
location.href="servlet/DelServlet?ids="+arr;
}else{
alert("请至少选中一条进行批量删除");
}
}
</script>

</head>

<body>
<center>
<input type="radio" id="allcheck" name="allcheck" onclick="allcheck();"/>全选  
<input type="radio" id="allnotcheck" name="allcheck"  onclick="allnotcheck();"/>全不选  
<input type="radio" id="backcheck" name="allcheck"  onclick="backcheck();"/>反选  
<a href="javascript:void(0);" onclick="alldel();">批量删除</a>
<br/>
<table border="1">
<tr>
<td></td>
<td>序号 </td>
<td>姓名</td>
<td>邮箱 </td>
<td>密码 </td>
</tr>
<c:forEach var="u" items="${list}">
<tr>
<td>
<input type="checkbox" name="ck" value="${u.id}"/>
</td>
<td>${u.id } </td>
<td>${u.name }</td>
<td>${u.email } </td>
<td>${u.pwd } </td>
</tr>
</c:forEach>

</table>

</center>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航