console
var SourceOptions = [{'value':'content01','ischecked':false,'isDiasble':false},{'value':'content02','ischecked':false,'isDiasble':true},{'value':'content03','ischecked':false,'isDiasble':false},{'value':'content04','ischecked':false,'isDiasble':false},{'value':'content05','ischecked':false,'isDiasble':false},{'value':'content06','ischecked':false,'isDiasble':false},{'value':'content07','ischecked':false,'isDiasble':false},{'value':'content08','ischecked':false,'isDiasble':false}];
var TargetOptions = [{'value':'content09','ischecked':false,'isDiasble':false},{'value':'content10','ischecked':false,'isDiasble':false}];
var leftheadDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[0].getElementsByClassName("header")[0];
var leftcontentDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[0].getElementsByClassName("content")[0];
var rightheadDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[1].getElementsByClassName("header")[0];
var rightcontentDom = document.getElementById("transfer").getElementsByClassName("optionsContain")[1].getElementsByClassName("content")[0];
var transferDom = document.getElementById("transfer").getElementsByClassName("transfer")[0];
var isAllCheckSource = false;
var isAllCheckTarget = false;
function checkOption(value) {
var tempItm = SourceOptions.find(function(option) {
return option.value == value;
});
if(tempItm && !tempItm.isDiasble) {
tempItm.ischecked = !tempItm.ischecked;
operateItem(leftcontentDom,tempItm.value,tempItm.ischecked);
checkActiveTransfer('left');
checkIfAllChecked('source');
updateSelectText('source');
return;
}
var tempItm = TargetOptions.find(function(option) {
return option.value == value;
});
if(tempItm && !tempItm.isDiasble) {
tempItm.ischecked = !tempItm.ischecked;
operateItem(rightcontentDom,tempItm.value,tempItm.ischecked);
checkActiveTransfer('right');
checkIfAllChecked('target');
updateSelectText('target');
return;
}
}
function operateItem(mbDom,value,isChecked) {
var operOption;
var tempOpDoms = mbDom.getElementsByClassName("option");
for(var i=0;i < tempOpDoms.length;i++) {
var textValue = tempOpDoms[i].getElementsByClassName("item")[0].innerHTML;
if(textValue == value) {
operOption = tempOpDoms[i];
break;
}
}
if(operOption) {
if(isChecked) {
operOption.setAttribute("class","option checked");
} else {
operOption.setAttribute("class","option");
}
}
}
function checkActiveTransfer(type) {
if(type == 'left') {
var tmp = SourceOptions.some(function(op) {
return !op.isDiasble && op.ischecked;
});
if(tmp) {
transferDom.getElementsByClassName("toright")[0].setAttribute("class","toright active");
} else {
transferDom.getElementsByClassName("toright")[0].setAttribute("class","toright");
}
} else {
var tmp = TargetOptions.some(function(op) {
return !op.isDiasble && op.ischecked;
});
if(tmp) {
transferDom.getElementsByClassName("toleft")[0].setAttribute("class","toleft active");
} else {
transferDom.getElementsByClassName("toleft")[0].setAttribute("class","toleft");
}
}
}
function checkAllSource() {
isAllCheckSource = !isAllCheckSource;
if(isAllCheckSource) {
checkAllItems('source');
leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
} else {
checkAllItems('source');
leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
}
}
function checkAllTarget() {
isAllCheckTarget = !isAllCheckTarget;
if(isAllCheckTarget) {
checkAllItems('target');
rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
} else {
checkAllItems('target');
rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
}
}
function checkAllItems(type) {
if(type == 'source') {
SourceOptions.forEach(function(opto) {
if(!opto.isDiasble && (opto.ischecked != isAllCheckSource)) {
checkOption(opto.value);
}
});
} else {
TargetOptions.forEach(function(opto) {
if(!opto.isDiasble && (opto.ischecked != isAllCheckTarget)) {
checkOption(opto.value);
}
});
}
}
function updateSelectText(type) {
if(type == 'source') {
var temps = SourceOptions.filter(function(op) {
return op.ischecked;
});
leftheadDom.getElementsByClassName("select-all")[0].getElementsByClassName("items")[0].innerHTML = temps.length+"/"+SourceOptions.length+" items";
} else {
var temps = TargetOptions.filter(function(op) {
return op.ischecked;
});
rightheadDom.getElementsByClassName("select-all")[0].getElementsByClassName("items")[0].innerHTML = temps.length+"/"+TargetOptions.length+" items";
}
}
function checkIfAllChecked(type) {
if(type == 'source') {
var tmp = SourceOptions.some(function(op) {
return !op.isDiasble && !op.ischecked;
});
if(tmp || (SourceOptions.length == 0)) {
leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
} else {
leftheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
}
} else {
var tmp = TargetOptions.some(function(op) {
return !op.isDiasble && !op.ischecked;
});
if(tmp || (TargetOptions.length == 0)) {
rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all");
} else {
rightheadDom.getElementsByClassName("select-all")[0].setAttribute("class","select-all checked");
}
}
}
function SourceToTarget() {
var mvItems = [];
SourceOptions.forEach(function(option) {
if(!option.isDiasble && option.ischecked) {
movingOption(option,mvItems,SourceOptions,TargetOptions,leftcontentDom,rightcontentDom);
}
});
SourceOptions = SourceOptions.filter(function(op) {
var tmp = mvItems.findIndex(function(item) {
return item == op.value;
});
return tmp == -1;
});
checkIfAllChecked('source');
updateSelectText('source');
checkActiveTransfer('left');
updateSelectText('target');
}
function filterSourItems(options,mvItems) {
options = options.filter(function(op) {
var tmp = mvItems.findIndex(function(item) {
return item == op.value;
});
return tmp == -1;
});
}
function TargetToSource() {
var mvItems = [];
TargetOptions.forEach(function(option) {
if(!option.isDiasble && option.ischecked) {
movingOption(option,mvItems,TargetOptions,SourceOptions,rightcontentDom,leftcontentDom);
}
});
TargetOptions = TargetOptions.filter(function(op) {
var tmp = mvItems.findIndex(function(item) {
return item == op.value;
});
return tmp == -1;
});
checkIfAllChecked('target');
updateSelectText('target');
checkActiveTransfer('right');
updateSelectText('source');
}
function movingOption(option,mvItems,sourOptions,TargOptions,sourContentDoms,TargContentDoms) {
var moveOption;
var tempOpDoms = sourContentDoms.getElementsByClassName("option");
for(var i=0;i < tempOpDoms.length;i++) {
var textValue = tempOpDoms[i].getElementsByClassName("item")[0].innerHTML;
if(textValue == option.value) {
moveOption = tempOpDoms[i];
break;
}
}
if(moveOption) {
moveOption.setAttribute("class","option");
option.ischecked = false;
TargOptions.push(option);
mvItems.push(option.value);
sourContentDoms.removeChild(moveOption);
TargContentDoms.appendChild(moveOption);
}
}
<div id="transfer" class="transferContainer">
<div class="optionsContain">
<div class="header">
<span class="select-all">
<span class="checkbox" onclick="checkAllSource()">✔</span>
<span class="items">0/8 items</span>
</span>
<span class="text">Source</span>
</div>
<div class="content">
<span class="option" onclick="checkOption('content01')">
<span class="checkbox">✔</span>
<span class="item">content01</span>
</span>
<span class="option disable" onclick="checkOption('content02')">
<span class="checkbox">✔</span>
<span class="item">content02</span>
</span>
<span class="option" onclick="checkOption('content03')">
<span class="checkbox">✔</span>
<span class="item">content03</span>
</span>
<span class="option" onclick="checkOption('content04')">
<span class="checkbox">✔</span>
<span class="item">content04</span>
</span>
<span class="option" onclick="checkOption('content05')">
<span class="checkbox">✔</span>
<span class="item">content05</span>
</span>
<span class="option" onclick="checkOption('content06')">
<span class="checkbox">✔</span>
<span class="item">content06</span>
</span>
<span class="option" onclick="checkOption('content07')">
<span class="checkbox">✔</span>
<span class="item">content07</span>
</span>
<span class="option" onclick="checkOption('content08')">
<span class="checkbox">✔</span>
<span class="item">content08</span>
</span>
</div>
</div>
<div class="transfer">
<div class="toleft" onclick="TargetToSource()">‹</div>
<div class="toright" onclick="SourceToTarget()">›</div>
</div>
<div class="optionsContain">
<div class="header">
<span class="select-all">
<span class="checkbox" onclick="checkAllTarget()">✔</span>
<span class="items">0/2 items</span>
</span>
<span class="text">Target</span>
</div>
<div class="content">
<span class="option" onclick="checkOption('content09')">
<span class="checkbox">✔</span>
<span class="item">content09</span>
</span>
<span class="option" onclick="checkOption('content10')">
<span class="checkbox">✔</span>
<span class="item">content10</span>
</span>
</div>
</div>
</div>
.transferContainer{
display:flex;
justify-content:center;
height:240px;
//border:solid 1px;
width:460px;
padding:0;
}
.transferContainer .optionsContain{
display:flex;
flex-direction:column;
height:100%;
width:200px;
border:solid 1px #999;
border-radius:4px;
}
.transferContainer .optionsContain .header{
display:flex;
justify-content:space-between;
align-items:center;
height:36px;
width:100%;
border-bottom:solid 1px #999;
font-size:12px;
color:#666;
}
.transferContainer .optionsContain .header .select-all{
margin-left:10px;
height:100%;
display:flex;
align-items:center;
border:solid 0px;
}
.transferContainer .checkbox{
display:inline-block;
height:12px;
width:12px;
border:solid 1px #808080;
border-radius:2px;
margin-right:5px;
cursor:pointer;
font-size:12px;
color:#fff;
text-align:center;
line-height:12px;
}
.transferContainer .checkbox:hover{
border-color:#3399ff;
}
.transferContainer .optionsContain .header .select-all.checked .checkbox{
border-color:#1aa3ff;
background:#1aa3ff;
color:#fff;
}
.transferContainer .optionsContain .header .text{
margin-right:10px;
}
.transferContainer .optionsContain .content {
//display:inline-block;
height:100%;
overflow-y:auto;
}
.transferContainer .optionsContain .content .option {
display:flex;
align-items:center;
height:30px;
width:100%;
font-size:14px;
color:#333;
padding-left:10px;
box-sizing:border-box;
}
.transferContainer .optionsContain .content .option:hover{
background:#e5ffff;
}
.transferContainer .optionsContain .content .option:not(.disable) {
cursor:pointer;
}
.transferContainer .optionsContain .content .option.disable {
cursor:not-allowed;
}
.transferContainer .optionsContain .content .option.checked.disable .checkbox{
border-color:#808080;
background:#d9d9d9;
opacity:0.7;
cursor:not-allowed;
color:#666;
}
.transferContainer .optionsContain .content .option.disable:not(.checked) .checkbox{
border-color:#808080;
background:#d9d9d9;
opacity:0.7;
cursor:not-allowed;
color:#d9d9d9;
}
.transferContainer .optionsContain .content .option.checked .checkbox{
border-color:#1aa3ff;
background:#1aa3ff;
color:#fff;
}
.transferContainer .optionsContain .content .option .item{
margin-left:5px;
}
.transferContainer .transfer{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100%;
width:60px;
}
.transferContainer .transfer div {
display:inline-block;
height:23px;
width:36px;
line-height:23px;
border:solid 1px #999;
border-radius:4px;
background:#e6e6e6;
color:#808080;
text-align:center;
margin-top:5px;
margin-bottom:5px;
cursor:not-allowed;
}
.transferContainer .transfer div.active {
border-color:#0099ff;
background:#0099ff;
color:#fff;
cursor:pointer;
}
.transferContainer .transfer div.active:hover {
background:#006bb3;
border-color:#006bb3;
}