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 相关文章推荐
javascript实现数字验证码的简单实例
Feb 10 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
一个PHP的String类代码
2010/04/20 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
django基础学习之send_mail功能
2019/08/07 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
打架检讨书100字
2014/01/08 职场文书
党委班子对照检查材料
2014/08/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书