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=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="请选择" onclick="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 value="13" title="汽车频道"/>
汽车频道<input type="checkbox" checked value="12" title="图片频道"/>
图片频道 </div>
</div>
< /p>
< div id="bg"> </div>
< div id="selectItem" class="selectItem">
<div class="tit bgc_ccc move" onmousedown="drag(event,this)">
<h2 class="left">请选择频道</h2>
<span class="pointer right" <span class="pointer right" </div>
<div class="cls"></div>
<div class="cont">
<div id="selectSub" class="selectSub">
<input type="checkbox" value="1" title="新闻频道"/>
新闻频道
<input type="checkbox" value="2" title="旅游频道"/>
旅游频道
<input type="checkbox" value="3" title="时尚频道"/>
时尚频道
<input type="checkbox" value="4" title="财金频道"/>
财金频道
<input type="checkbox" value="5" title="军事频道"/>
军事频道
<input type="checkbox" value="6" title="娱乐频道"/>
娱乐频道
<input type="checkbox" value="7" title="房产频道"/>
房产频道
<input type="checkbox" value="8" title="健康频道"/>
健康频道
<input type="checkbox" value="9" title="历史频道"/>
历史频道
<input type="checkbox" value="10" title="航空频道"/>
航空频道
<input type="checkbox" value="11" title="台海频道"/>
台海频道
<input type="checkbox" value="12" title="图片频道"/>
图片频道
<input type="checkbox" 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="请选择" onclick="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 value="3" title="管理组2"/>
管理组2</div>
</div>
< /p>
< div id="selectItem2" class="selectItem">
<div class="tit bgc_ccc move" onmousedown="drag(event,this)">
<h2 class="left">请选择组</h2>
<span class="pointer right" <span class="pointer right" </div>
<div class="cls"></div>
<div class="cont">
<div id="selectSub2" class="selectSub">
<input type="checkbox" value="1" title="管理组"/>管理组
<input type="checkbox" value="2" title="新闻组"/>新闻组
<input type="checkbox" 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="添加" 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+"' onclick='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+"' onclick='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+"' onclick='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. = function(){oDrag = "";}
document. = 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>