网页中常用的两个全选js

最新推荐文章于 2023-01-10 10:40:54 发布

riyunzhu

最新推荐文章于 2023-01-10 10:40:54 发布

阅读量174

点赞数

文章标签： xhtml javascript ViewUI

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

<!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>

运行结果图：