js实现表单项的全选、反选及删除操作示例

更新时间：2020年06月05日 10:59:33 作者：moqiang02

这篇文章主要介绍了js实现表单项的全选、反选及删除操作,结合实例形式分析了基于dedecms后台使用js实现表单项的全选、反选及删除相关操作技巧,需要的朋友可以参考下

本文实例讲述了js实现表单项的全选、反选及删除操作。分享给大家供大家参考，具体如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网站会员激活码管理</title>
<script language="javascript">
function ReSel(){
    for(i=0;i<document.form1.logs.length;i++){ //这一用法只对form表单有效
        document.form1.logs[i].checked = true; //如果是实现【全不选】的话，改成false即可
    }
}
function SeSel(){
    for(i=0;i<document.form1.logs.length;i++){
        if(document.form1.logs[i].checked) document.form1.logs[i].checked = false;
        else document.form1.logs[i].checked = true;
    }
}
function DelSel(){
     var nid = getCheckboxItem();
     if(nid==""){
         alert("请选择项目!\r\n");
         return ;
     }
     location.href = "member_activation.php?dopost=del&ids="+nid;
}
//获得选中文件的文件名
function getCheckboxItem(){
     var allSel="";
     if(document.form1.logs.value) return document.form1.logs.value;
     for(i=0;i<document.form1.logs.length;i++)
     {
         if(document.form1.logs[i].checked){
             if(allSel=="")
                 allSel=document.form1.logs[i].value;
             else
                 allSel=allSel+"-"+document.form1.logs[i].value;
         }
     }
   //alert(allSel);  //1-2-7
     return allSel;
}
</script>
 
</head>
<body background='images/allbg.gif' leftmargin='8' topmargin='8'>
 
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#cfcfcf">
  <tr>
   <td>激活码列表</td>
  </tr>
  <tr bgcolor="#FEFCEF" height="30" align="center"> 
   <td width="3%">选择</td>
   <td width="5%">id</td>
   <td width="30%">激活码</td>
  </tr>
  <form name="form1">
    {dede:datalist} 
    <tr height="26" align="center" bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
      onMouseOut="javascript:this.bgColor='#FFFFFF';"><!--onMouseMove/onMouseOut:鼠标移动到该行后，被选中的行变色-->
     <td><input name='logs' type='checkbox' value='{dede:field.id/}' /></td>
     <td>{dede:field.id/}</td>
     <td>{dede:field.core/}</td>
    </tr>
    {/dede:datalist}
  </form>
  <tr bgcolor="#ffffff"> 
   <td height="36" colspan="9">
      <a class="coolbg" onClick="ReSel();" >全选</a>
    <a class="coolbg" onClick="SeSel();" >反选</a>
      <a class="coolbg" onClick="DelSel();">删除</a>
   </td>
  </tr>
</table>
 
</body>
</html>

member_activation.php

//删除选定状态
if($dopost=="del")
{
  $ids = explode('-',$ids);
  $dquery = "";
  foreach($ids as $id)
  {
    if($dquery=="")
    {
      $dquery .= "id='$id' ";
    }
    else
    {
      $dquery .= " OR id='$id' ";
    }
  }
  if($dquery!="") $dquery = " WHERE ".$dquery;
  $dsql->ExecuteNoneQuery("DELETE FROM cr_member_activation $dquery");
  ShowMsg("成功删除指定的记录！","./index.php");
  exit();
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

javascript中&&运算符与||运算符的使用方法实例
&&和||总是傻傻分不清,在这里详细记录一下吧,也给你们分享一下,所以这篇文章主要给大家介绍了关于javascript中&&运算符与||运算符的使用方法,需要的朋友可以参考下
2021-11-11
在uniapp中如何去掉一些不想要的权限
在uniapp中,云打包以后会自动增加一个电话权限,并且在manifest.json里面也没有添加这个权限,怎么添加都添加不上,下面小编给大家分享在uniapp中如何去掉一些不想要的权限,感兴趣的朋友跟随小编一起看看吧
2024-03-03
JS实现可视化音频效果的实例代码
这篇文章主要介绍了JS实现可视化音频效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
js鼠标移动时禁止选中文字
本文主要介绍了js鼠标移动时禁止选中文字的方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
利用404错误页面实现UrlRewrite的实现代码
要求:网站编码为utf-8,不适用于GB2312; 替换字符的正则可以自己增加和修改，以适合自己的网站；
2008-08-08
瀑布流布局代码一例
提起瀑布流布局想必大家并不陌生吧，其实呢？原理也就那样，下面有个小例子，与大家分享
2014-04-04
JS鼠标滚动分页效果示例
在开发的时候为什么左边的数据出来比右边的慢呢？因为这里没有进行分页，左边的数据多，所以查询相对较慢。怎么解决此问题呢？下面小编给大家带来了JS鼠标滚动分页效果示例，需要的的朋友参考下吧
2017-07-07
简述ES6新增关键字let与var的区别
最近看了很多文章，偶然间看到ES6中新增了一个关键字 let ，它具有与 var 关键字相似的功能。接下来通过本文给大家介绍ES6新增关键字let与var的区别,需要的朋友可以参考下
2019-08-08
Bootstrap基本布局实现方法详解
这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js 数据类型判断的方法
这篇文章主要介绍了js 数据类型判断的方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-12-12