js的多项选择

最新推荐文章于 2025-02-07 17:08:00 发布
最新推荐文章于 2025-02-07 17:08:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript 文章标签： input class function div email button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zjhh116/article/details/7003345
版权
 

<!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=utf-8" />
<style type="text/css">
<!--
body {padding-top:50px;font-size:12px;}
h2 {margin:0px;padding:0px;font-size:12px;font-weight:bold;}
.bton {border:1px solid #CCC;background:#DDD;}
.cont {padding:10px;}
#content {width:600px; margin:0px auto;}
.selectItem {background:#FFF;position:absolute;top:0px;border:1px solid #000;margin-top:10px;width:400px;z-index:2;display:none;overflow-y:srcoll;}
.preview {margin:1px; border:1px solid #CCC;}
#result {margin-left:150px;border:1px solid #CCC;margin-top:10px;}
.tit {line-height:20px;height:20px;margin:1px;padding-left:10px;}
.bgc_ccc {background:#CCC;}
.bgc_eee {background:#eee;}
.c_999 {color:#999}
.pointer {cursor:pointer;}
.left {float:left;}
.right {float:right;}
.span_align {text-align:right;display:inline-block;width:150px;}
.cls {clear:both;font-size:0px;height:0px;overflow:hidden;}
#bg {background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;position:absolute;left:0px;top:0px;display:none;z-index:1;}
.move {cursor:move;}
 .selectSub{height:40px;overflow-x:hidden;overflow-y:auto;border:1px solid black;scrollbar-face-color: #ABCDEF;}
-->
</style>
</head>
<body>
<form action="" method="post" name="role_form">
<input id="channels" name="channels" type="hidden" />
<input id="groups" name="groups" type="hidden" />
<input id="status_value" name="status_value" type="hidden" />
<div id="content">
<p>
  <span class="span_align">用户名：</span><input name="user_name" id="user_name" type="text" />
</p>
<p>
  <span class="span_align">状态：</span><input name="status" type="radio" checked value="1"/>启用 <input name="status" type="radio" value="0"/>停用
</p>
<p>
  <span class="span_align">密码：</span><input name="passwd" id="passwd" type="password" />
</p>
<p>
  <span class="span_align">确认密码：</span><input id="re_passwd" type="password" />
</p>
<p>
  <span class="span_align">邮箱：</span><input name="email" id="email" type="text" />
</p>
<p>
  <span class="span_align">选择角色：</span><select name="sel_role">
  <option value="1">老大</option>
  <option value="2">老二</option>
  <option value="3">老三</option>
  </select>
</p>
<p>
  <span class="span_align">选择频道：</span><input type="button" class="bton pointer" value="请选择" οnclick="openZjh('previewItem','makeSureItem','selectSub','selectItem');"/>
  <div id="result">
    <div class="tit bgc_eee">
      <h2>您已选择的频道汇总</h2>
    </div>
    <div class="cont" id="makeSureItem">
    <input type="checkbox" checked οnclick="copyItem('makeSureItem','previewItem','selectSub');same(this,'selectSub');" value="13" title="汽车频道"/>
     汽车频道<input type="checkbox" checked οnclick="copyItem('makeSureItem','previewItem','selectSub');same(this,'selectSub');" value="12" title="图片频道"/>
     图片频道 </div>
  </div>
</p>
<div id="bg"> </div>
<div id="selectItem" class="selectItem">
  <div class="tit bgc_ccc move" οnmοusedοwn="drag(event,this)">
    <h2 class="left">请选择频道</h2>
    <span class="pointer right" οnclick="openBg(0);openSelect(0,'selectItem');">[取消]</span> <span class="pointer right" οnclick="makeSure('previewItem','makeSureItem','selectSub','selectItem');">[确定]</span> </div>
  <div class="cls"></div>
  <div class="cont">
    <div id="selectSub" class="selectSub">
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="1" title="新闻频道"/>
        新闻频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="2" title="旅游频道"/>
        旅游频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="3" title="时尚频道"/>
        时尚频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="4" title="财金频道"/>
        财金频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="5" title="军事频道"/>
        军事频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="6" title="娱乐频道"/>
        娱乐频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="7" title="房产频道"/>
        房产频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="8" title="健康频道"/>
        健康频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="9" title="历史频道"/>
        历史频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="10" title="航空频道"/>
        航空频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="11" title="台海频道"/>
        台海频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="12" title="图片频道"/>
        图片频道
        <input type="checkbox" οnclick="addPreItem('selectSub','previewItem')" value="13" title="汽车频道"/>
        汽车频道
    </div>
  </div>
  <div class="preview">
    <div class="tit bgc_eee c_999">
      <h2>您已选择的频道</h2>
    </div>
    <div class="cont" id="previewItem"></div>
  </div>
</div>
<p>
  <span class="span_align">选择组：</span><input type="button" class="bton pointer" value="请选择" οnclick="openZjh('previewItem2','makeSureItem2','selectSub2','selectItem2');"/>
  <div id="result">
    <div class="tit bgc_eee">
      <h2>您已选择的组汇总</h2>
    </div>
    <div class="cont" id="makeSureItem2">
    <input type="checkbox" checked οnclick="copyItem('makeSureItem2','previewItem2','selectSub2');same(this,'selectSub2');" value="3" title="管理组2"/>
        管理组2</div>
  </div>
</p>
<div id="selectItem2" class="selectItem">
  <div class="tit bgc_ccc move" οnmοusedοwn="drag(event,this)">
    <h2 class="left">请选择组</h2>
    <span class="pointer right" οnclick="openBg(0);openSelect(0,'selectItem2');">[取消]</span> <span class="pointer right" οnclick="makeSure('previewItem2','makeSureItem2','selectSub2','selectItem2');">[确定]</span> </div>
  <div class="cls"></div>
  <div class="cont">
    <div id="selectSub2" class="selectSub">
        <input type="checkbox" οnclick="addPreItem('selectSub2','previewItem2')" value="1" title="管理组"/>管理组
        <input type="checkbox" οnclick="addPreItem('selectSub2','previewItem2')" value="2" title="新闻组"/>新闻组
        <input type="checkbox" οnclick="addPreItem('selectSub2','previewItem2')" value="3" title="管理组2"/>管理组2
    </div>
  </div>
  <div class="preview">
    <div class="tit bgc_eee c_999">
      <h2>您已选择的组</h2>
    </div>
    <div class="cont" id="previewItem2"> </div>
  </div>
</div>
<p align="center">
  <input type="button" value="添加" οnclick="roleSub();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" />
</p>
</div>
</form>

<script type="text/javascript">
function zjh(o){//获取对象
 if(typeof(o)=="string")
 return document.getElementById(o);
 return o;
}
function openBg(state){//遮照打开关闭控制
 if(state==1){
  var h=document.body.clientHeight>document.documentElement.clientHeight?document.body.clientHeight:document.documentElement.clientHeight;
  zjh("bg").style.height=h+"px";
  zjh("bg").style.display="block";
 }else{
  zjh("bg").style.display="none";
 }
}
function openSelect(state,selectItem){//选择频道层关闭打开控制
 if(state==1){
  zjh(selectItem).style.display="block";
  zjh(selectItem).style.left=(zjh("bg").offsetWidth-zjh(selectItem).offsetWidth)/2+"px";
  zjh(selectItem).style.top=document.body.scrollTop+160+"px"; 
 }else{
  zjh(selectItem).style.display="none";
 }
}
function addPreItem(selectSub,previewItem){
var items=zjh(selectSub).getElementsByTagName("input");
zjh(previewItem).innerHTML='';
 var len=0;
 for(var i=0;i<items.length;i++){
  if(items[i].checked){
   var mes="<input type='checkbox' checked value='"+items[i].value+"' title='"+items[i].title+"' οnclick='copyItem(\""+previewItem+"\",\""+previewItem+"\",\""+selectSub+"\");same(this,\""+selectSub+"\");'>"+items[i].title;
   zjh(previewItem).innerHTML+=mes;
  }
 }
}
function makeSure(previewItem,makeSureItem,selectSub,selectItem){
 openBg(0);
 openSelect(0,selectItem);
 copyItem(previewItem,makeSureItem,selectSub);
}
function openZjh(previewItem,makeSureItem,selectSub,selectItem){
 openBg(1);
 openSelect(1,selectItem);
 var items=zjh(makeSureItem).getElementsByTagName("input");
 zjh(previewItem).innerHTML='';
 var len=0;
 for(var i=0;i<items.length;i++){
  if(items[i].checked){
   var mes="<input type='checkbox' checked value='"+items[i].value+"' title='"+items[i].title+"' οnclick='copyItem(\""+previewItem+"\",\""+previewItem+"\",\""+selectSub+"\");same(this,\""+selectSub+"\");'>"+items[i].title;
   zjh(previewItem).innerHTML+=mes;
  }
 }
 var items=zjh(selectSub).getElementsByTagName("input");
 for(var i=0;i<items.length;i++){
 items[i].checked=false;
 }
 items=zjh(makeSureItem).getElementsByTagName("input");
 for(var i=0;i<items.length;i++){
  same(items[i],selectSub);
 }
}
function copyItem(id1,id2,selectSub){
 var mes="";
 var items2 = zjh(id1).getElementsByTagName("input");
 for(var i=0;i<items2.length;i++){
  if(items2[i].checked==true){
   mes+="<input type='checkbox' checked value='"+items2[i].value+"' title='"+items2[i].title+"' οnclick='copyItem(\""+id2+"\",\""+id1+"\",\""+selectSub+"\");same(this,\""+selectSub+"\");'>"+items2[i].title;
  }
 }
 zjh(id2).innerHTML=mes;
 zjh(id1).innerHTML=mes;
}
function same(ck,selectSub){
var items=zjh(selectSub).getElementsByTagName("input");
 for(var i=0;i<items.length;i++){
  if(ck.value==items[i].value){
   items[i].checked=ck.checked;
  }
 }
}
/* 鼠标拖动 */
var oDrag = "";
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
 var e = window.event ? window.event : e;
 var mouseD = document.all ? 1 : 0;
 if(e.button == mouseD){
  oDrag = o.parentNode;
  ox = e.clientX;
  oy = e.clientY; 
 }
}
function dragPro(e){
 if(oDrag != ""){
  var e = window.event ? window.event : e;
  dx = parseInt(zjh(oDrag).style.left);
  dy = parseInt(zjh(oDrag).style.top);
  nx = e.clientX;
  ny = e.clientY;
  zjh(oDrag).style.left = (dx + ( nx - ox )) + "px";
  zjh(oDrag).style.top = (dy + ( ny - oy )) + "px";
  ox = nx;
  oy = ny;
 }
}
document.onmouseup = function(){oDrag = "";}
document.onmousemove = function(event){dragPro(event);}
/***********************/
// 去字符串空格
String.prototype.trim=function(){
 return this.replace(/(^\s*)|(\s*$)/g, '');
}
// 得到radio选择的值
function getRadioValue(name){
 var radio=document.getElementsByName(name);
 var checkedValue=-1;
 for(var i=0;i<radio.length;i++){
  if(radio[i].checked==true){
   checkedValue=radio[i].value;
  }
 }
 return checkedValue;
}
//判断e_mail格式是否正确。
function isEmailFormat(str){
  if(/(\S)+[@]{1}(\S)+[.]{1}(\w)+/.test(str)){
   if(str.indexOf('..')>-1){
      return false;
   }
   str=str.trim();
   var dbCheck = 0;
   for (var i=0;i< str.length;i++){
      if(str.charAt(i)==' ') return false;
      if(str.charAt(i)=='@'){
        if(dbCheck == 0) {
         dbCheck = 1;
        }else{
         return false;
        }
      }
   }
   return true;
  } else {
   return false;
  }
}
function roleSub(){
 var userName=zjh("user_name").value.trim();
 var passwd=zjh('passwd').value.trim();
 var newPasswd=zjh('re_passwd').value.trim();
 var email=zjh('email').value.trim();
 if(userName==""){
  alert("请输入用户名。");
  zjh("user_name").focus();
  return false;
 }else if(passwd=='') {
  alert("请输入密码。");
  zjh('passwd').focus();
  return false;
 }else if(newPasswd != passwd) {
  alert("两次输入的密码不一致,请重新输入。");
  zjh('re_passwd').focus();
  return false;
 }else if(email!=''&&!isEmailFormat(email)) {
  alert("邮箱格式不正确,请重新输入。");
  zjh('email').focus();
  return false;
 }
   var checkboxs = zjh("makeSureItem").getElementsByTagName("input");
   var channels = '';
   for(var i=0;i<checkboxs.length;i++){
    if(i==checkboxs.length-1){
     channels+=checkboxs[i].value;
    }else{
      channels+=checkboxs[i].value+',';
     }
   }
   zjh('channels').value=channels;
   alert(channels);
   checkboxs = zjh("makeSureItem2").getElementsByTagName("input");
   var groups = '';
   for(var i=0;i<checkboxs.length;i++){
    if(i==checkboxs.length-1){
     groups+=checkboxs[i].value;
    }else{
      groups+=checkboxs[i].value+',';
     }
   }
   zjh('groups').value=groups;
   alert(groups);
   zjh('status_value').value=getRadioValue('status');
   alert(getRadioValue('status'));
   document.role_form.submit();
}
</script>
</body>
</html>

JavaScript技巧：实现多选和全选功能的代码
CodeWhizZ的博客
10-09 483
函数通过过滤选中的复选框，找出所有被选中的复选框，并在控制台输出它们的ID。你可以根据需要修改这部分代码，将选中的复选框添加到一个数组或执行其他操作。每个复选框都应该有一个唯一的标识符（ID）和一个共享的类名，以便我们可以通过类名选择所有的复选框。我们将使用事件监听器来捕获复选框的状态变化，并根据需要更新其他复选框的状态。在上面的代码中，我们首先通过类名获取所有的复选框元素，并将其存储在一个数组中。函数获取全选复选框的状态，并将其应用到所有的复选框上，从而实现全选和取消全选的功能。
js 实现 用JavaScript生成多项选择
03-31
js 实现 用JavaScript生成多项选择! 值得下载看看!资源免费,大家分享!!
js如何实现全选
最新发布
BANaanaa的博客
02-07 912
js实现全选
JS多选下拉框_实现多项选择
11-19
JS多选下拉框，实现多选。点击显示下拉。
JS多项目选择脚本
fengpeng120的专栏
06-25 186
代码 &lt;html&gt;   &lt;script language="javascript"&gt;       function insertall(){                var oDest=document.all.lstSelected;                for (var i=0;i&lt;document....
javascript多项选择框
10-29
JavaScript中的多项选择框，也称为复选框（Checkbox），是网页表单中常见的元素，用于让用户从多个选项中选择一个或多个。在本教程中，我们将深入探讨如何使用JavaScript来操作和增强这些元素，实现简单实用的功能。...
HTML调用JS实现多项滑动门选项卡特效
04-28
HTML调用JS实现多项滑动门选项卡特效是一种常见的前端技术，用于创建交互式和动态的网页内容。这种效果常用于导航菜单、内容切换、图片展示等场景，为用户提供更直观的操作体验。以下是对这个技术的详细解释： 一、...
Code_Quiz:一个使用Javascript制作的简单的多项选择游戏
03-05
`Code_Quiz` 是一个基于JavaScript开发的简单多选题游戏。这个项目旨在帮助用户通过互动的方式学习和测试他们的编程知识，特别是JavaScript相关的知识。JavaScript是一种广泛使用的编程语言，用于创建动态网页和...
多项选择列表弹出窗口.zip
04-27
在多项选择列表弹出窗口中，JavaScript主要负责处理用户与界面的交互，如响应按钮点击事件、显示/隐藏弹出窗口、管理列表项的选中状态等。我们可以使用`addEventListener`方法监听按钮点击事件，然后使用`style....
JS实现下拉框多项选择
03-03
下拉选框没有实现多选功能，所以用JS来这现它。使用还比较方便
js实现多选多列选择
03-24
用js实现多选控件,也可以分多列。 ... ... ... 很简单，不多写了.
js实现多选、全选、反选、取消选择（篇一）
纸飞机博客
12-04 7941
就算全世界离开你，还有一个我来陪，我会永远站在你身边。 对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。 多选和取消选择 效果图如下： 代码如下： <template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item.
js实现多选
L_3995的博客
07-07 396
span { width: 100px; text-align: center; line-height: 30px; border: 1px solid #ddd; background-color: #eee; display: inline-block; } .active { border: 1px solid red; color: red ...
js多选
pengpeng11的专栏
06-09 100
[code="js"] function actionEvent(methodname){ var form = document.forms[0]; if(validateIsSelect(form.all, form.productids)){ form.action=''; form.method.value=methodname; ...
JS多项选择脚本
lxy_abcde1190的专栏
04-18 588
html>   script language="javascript">        function insertall(){                 var oDest=document.all.lstSelected;                 for (var i=0;idocument.all.personLi
JS实现单选、多选、全选、反选
gs981600308的博客
02-18 3287
HTML &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;全选反选问题&lt;/title&gt;
js实现多选功能
Polaris_best的博客
03-10 1552
js实现多选功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值