网页中常用的两个全选js

下面这个再开发好多系统中应该都有用到吧:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function moveOption1(e1, e2){
 try{
  for(var i = 0; i < e1.options.length; i++){
  
   if( e1.options[i].selected ){
    var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
    e1.remove(i);
    i = i - 1;
   }
  }
  document.myform.msgto.value=getvalue(document.myform.list2);
 }
 catch(e){}
}


function moveOption2(e1, e2){
 try{
  for(var i = 0; i < e1.options.length; i++){
   if(e1.options[i].selected ){
    var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
    e1.remove(i);
    i = i - 1;
   }
  }
  document.myform.msgto.value=getvalue(document.myform.list2);
 }
 catch(e){}
}


function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}


function moveAllOption1(e1, e2){
 try{
  for(var i = 0;i < e1.options.length; i++){
   var e = e1.options[i];
   
   e2.options.add(new Option(e.text, e.value));
   e1.remove(i);
   i = i - 1;
  }
  document.myform.msgto.value=getvalue(document.myform.list2);  
 }
 catch(e){ 
 }
}
function moveAllOption2(e1, e2){
 try{
  for(var i = 0;i < e1.options.length; i++){
   var e = e1.options[i];
    e2.options.add(new Option(e.text, e.value));
   e1.remove(i);
   i = i - 1;
   
  }
  document.myform.msgto.value=getvalue(document.myform.list2);
  
 }
 catch(e){
  
 }
}
-->
</script>
<body>
  <form  method="post" name="myform"  οnsubmit="return checkdata();">
      <div style=" padding-bottom:20px;">
 <table border="0" width="100%" style="">
        <tr>
          <td bgcolor="#3399CC"   width="13%"><select  style="width:100%;" multiple name="list1" size="15" οndblclick="moveOption1(document.myform.list1, document.myform.list2)">
<option >111</option><option >222</option><option >333</option><option >444</option><option >555</option><option >666</option>
            </select>
          </td>
          <td width="10%" align="center"><input type="button" value="添加" onClick="moveOption1(document.myform.list1, document.myform.list2)">
            <br>
            <br>
            <input type="button" value="全选" onClick="moveAllOption1(document.myform.list1, document.myform.list2)">
            <br>
            <br>
            <input type="button" value="删除" onClick="moveOption2(document.myform.list2, document.myform.list1)">
            <br>
            <br>
            <input type="button" value="全删" onClick="moveAllOption2(document.myform.list2, document.myform.list1)">
          </td>
          <td bgcolor="#3399CC" width="13%"><select style="width:100%;" multiple name="list2" size="15" οndblclick="moveOption2(document.myform.list2, document.myform.list1)">
            </select>
          </td>
          <td></td>
        </tr>
      </table>
 </div>
      <input type="hidden" name="msgto" value="" />
    </form>

</body>
</html>

运行结果图:


下面这个呢在全部删除时用的比较多吧:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p {margin:0;font-size:12px;line-height:26px;}
</style>
<script type="text/javascript">
function check_all(obj,cName)
{
    var checkboxs = document.getElementsByName(cName);
    for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}
}
</script>
</head>
 
<body>
<p><input type="checkbox" name="all" οnclick="check_all(this,'c')" />全选/全不选</p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
</body>
</html>


运行结果图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值