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 单选框,多选框美化代码
Aug 01 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
JS实现百度搜索框
Feb 25 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关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python空元组在all中返回结果详解
2020/12/15 Python
如何开启linux的ssh服务
2013/06/03 面试题
小学教师自我鉴定
2013/11/07 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS