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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
js select常用操作控制代码
Mar 16 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue实现多级菜单效果
Oct 19 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
一篇文章带你使用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 mail to 配置详解
2014/01/16 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
关于Python解包知识点总结
2020/05/05 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
创业计划书撰写原则
2014/01/25 职场文书
医药个人求职信范文
2014/01/29 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
部门2015年度工作总结
2015/04/29 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL