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 相关文章推荐
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript常用经典算法详解
Jan 11 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
师德建设实施方案
2014/03/21 职场文书
激励口号大全
2014/06/17 职场文书
工作年限证明模板
2014/11/01 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers