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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
详解Vue打包优化之code spliting
Apr 09 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读注册表
2006/10/09 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
动手学习无线电
2021/03/10 无线电
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
使用JavaScript破解web
2018/09/28 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python实现扫雷小游戏
2020/04/24 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python从PDF中提取数据的示例
2020/10/30 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
啤酒节策划方案
2014/05/28 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
学校开除通知书
2015/04/25 职场文书