当前位置: 代码迷 >> Java Web开发 >> 全选和取消 怎么办
  详细解决方案

全选和取消 怎么办

热度:608   发布时间:2016-04-17 01:29:19.0
全选和取消 怎么处理
复选框是通过循环得到的 跟随表一起循环得到

全选 这个复选框是直接写上去的
怎么实现 点全选 就全选 或取消
这个我要代码


接下来怎么处理 全选删除 操作呢  

给我思路就好 


------解决方案--------------------
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head>  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  <title>全选和取消 怎么处理</title></head><script type="text/javascript">function bindEvent(fun) {  var args = [];  for(var i = 1; i < arguments.length; i++) {    args.push(arguments[i]);  }  return function() {      fun.apply(this, args);    };}function addCheckAllEvent(name, chk1, chk2) {  var chks = document.getElementsByName(name);  for(var i = 0; i < chks.length; i++) {    chks[i].checked = this.checked;    chks[i].mouseSelect = this.checked;  }  var chk = chk1 == this ? chk2 : chk1;  chk.checked = this.checked;  }function addCheckEvent(chk1, chk2) {  if(!this.checked && !this.mouseSelect) {    this.checked = true;    this.mouseSelect = true;            return;  }  this.mouseSelect = this.checked ? true : false;  if(!this.checked && chk1.checked) {    chk1.checked = chk2.checked = false;  }}window.onload = function() {  var chk1 = document.frm.chk1;  var chk2 = document.frm.chk2;  var name = 'item';  var chks = document.getElementsByName(name);  for(var i = 0; i < chks.length; i++) {    chks[i].mouseSelect = false;    chks[i].onclick = bindEvent(addCheckEvent, chk1, chk2);    chks[i].onmouseover = function() {      this.checked = true;    };    chks[i].onmouseout = function() {      if(!this.mouseSelect) {        this.checked = false;      }    }  }  chk1.onclick =   chk2.onclick = bindEvent(addCheckAllEvent, name, chk1, chk2);}</script><body>  <form name="frm" action="#">    <input type="checkbox" name="chk1"> 全选<br/><br/>    <input type="checkbox" name="item" value="1"> 选项一<br/>    <input type="checkbox" name="item" value="2"> 选项二<br/>    <input type="checkbox" name="item" value="3"> 选项三<br/>    <input type="checkbox" name="item" value="4"> 选项四<br/>    <input type="checkbox" name="item" value="5"> 选项五<br/>    <input type="checkbox" name="item" value="6"> 选项六<br/>    <input type="checkbox" name="item" value="7"> 选项七<br/>    <input type="checkbox" name="item" value="8"> 选项八<br/><br/>    <input type="checkbox" name="chk2"> 全选  </form></body>
------解决方案--------------------
今天手气不错,此段代码一次写成,没debug,
下面代码适应性很强,其实你不需要like匹配功能你用的时候checkbox名字都取成一样的例如abc就行了,后台得到的是一个数组,遍历数组删除就行了,checkbox的value就是要删除对象的id

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Insert title here</title>        <script type="text/javascript">            String.prototype.startWith = function(chars){                 var matchString = new RegExp("^" + chars) ;                 return this.match(matchString) != null ;            }            function demo(isChk,name){                var es=document.getElementsByTagName("input");//必要的时候这里可以优化速度                for(var i=0;i<es.length;i++){                    var eck=es[i];                    if(eck.type=='checkbox'&&eck.name.startWith(name)){                        eck.checked=isChk;                    }                }            }        </script>    </head>    <body>    <input type="checkbox" value="全选" onclick="demo(this.checked,'abc');">全选        <table>            <tr>                <td>                    <input type="checkbox" name="abc1">                </td>                <td>                    <input type="checkbox" name="abc2">                </td>                <td>                    <input type="checkbox" name="abc3">                </td>                <td>                    <input type="checkbox" name="abc4">                </td>            </tr>        </table>        我是用于对比的<input type="checkbox" name="XXXX">    </body></html>
  相关解决方案