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


Posted in Javascript onJune 05, 2020

本文实例讲述了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();
}

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

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

Javascript 相关文章推荐
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 #Javascript
vscode 插件开发 + vue的操作方法
Jun 05 #Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php实现的日历程序
2015/06/18 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
快速了解Python相对导入
2018/01/12 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python flask安装和命令详解
2019/04/02 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Django实现简单的分页功能
2021/02/22 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
英文导游欢迎词
2014/01/11 职场文书
2014年化验员工作总结
2014/11/18 职场文书
初中作文评语
2014/12/25 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
焦裕禄观后感
2015/06/03 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
如何使用pdb进行Python调试
2021/06/30 Python