js左右选项移动
function DataRelative(dataleft,dataright,lc,rc,add,remove,rightinput,leftinput,spanleft,spanright){
var that = this;
that.dataleft = dataleft;
that.dataright = dataright;
that.lc = lc;
that.rc = rc;
that.add = add;
that.remove = remove;
that.rightinput = rightinput;
that.leftinput = leftinput;
that.spanleft = spanleft;
that.spanright = spanright;
//左边全选
var leftAll = function(){
for(var i=0;i<that.leftinput.length;i++){
that.leftinput[i].checked=that.lc.checked
if(that.lc.checked){
that.add.disabled=false
}else{
that.add.disabled=true
}
}
}
//右边全选
var rightAll = function(){
for(var i=0;i<that.rightinput.length;i++){
that.rightinput[i].checked=that.rc.checked;
if(that.rc.checked){
that.remove.disabled=false
}else{
that.remove.disabled=true
}
}
}
//判断左边全选
var left = function(){
for(var i=0;i<that.leftinput.length;i++){
that.leftinput[i].onclick=function(){
var count=0;
for(var j=0;j<that.leftinput.length;j++){
if(that.leftinput[j].checked){
count++;
that.add.disabled=false
}
}
if(count==0){
that.add.disabled=true;
}
that.lc.checked=(count==that.leftinput.length);
};
}
}
var left1 = function(){
for(let i=0;i<that.leftinput.length;i++){
that.spanleft[i].onclick=function(){
if (that.leftinput[i].checked==true){
that.leftinput[i].checked=false;
}else{that.leftinput[i].checked=true}
var count=0;
for(var j=0;j<that.leftinput.length;j++){
if(that.leftinput[j].checked){
count++;
that.add.disabled=false
}
}
if(count==0){
that.add.disabled=true;
}
that.lc.checked=(count==that.leftinput.length);
};
}
}
//判断右边全选
var right = function(){
for(var i=0;i<that.rightinput.length;i++){
that.rightinput[i].onclick=function(){
var count=0;
for(var j=0;j<that.rightinput.length;j++){
if(that.rightinput[j].checked){
count++;
that.remove.disabled=false
}
}
if(count==0){
that.remove.disabled=true;
}
that.rc.checked=(count==that.rightinput.length);
}
}
}
var right1 = function(){
for(let i=0;i<that.rightinput.length;i++){
that.spanright[i].onclick=function(){
if (that.rightinput[i].checked==true){
that.rightinput[i].checked=false;
}else{that.rightinput[i].checked=true}
var count=0;
for(var j=0;j<that.rightinput.length;j++){
if(that.rightinput[j].checked){
count++;
that.remove.disabled=false
}
}
if(count==0){
that.remove.disabled=true;
}
that.rc.checked=(count==that.rightinput.length);
}
}
}
//被调用方法
var getChecked = function(inputs){
var checkedInputs = [];
for(var i=0;i<inputs.length;i++){
if(inputs[i].checked){
checkedInputs.push(inputs[i].parentNode);
}
}
return checkedInputs
}
//左边到右边
var moveTo = function(){
if(that.add.disabled==false){
var checked = getChecked(that.leftinput);
for(var i=0;i<checked.length;i++){
that.dataright.appendChild(checked[i]);
}
that.lc.checked=false;
that.add.disabled=true;
}
}
//右边到左边
var moveBack = function(){
if(that.remove.disabled==false){
var checked = getChecked(that.rightinput);
for(var i=0;i<checked.length;i++){
that.dataleft.appendChild(checked[i]);
}
that.rc.checked=false;
that.remove.disabled=true;
}
}
//自动判断全选
left();
right();
left1();
right1();
//左边到右边
add.onclick = function(){
moveTo();
left();
right();
left1();
right1();
leftAll();
rightAll();
}
//右边到左边
remove.onclick = function(){
moveBack();
left();
right();
left1();
right1();
leftAll();
rightAll();
}
//左边全选
lc.onclick = function(){
leftAll();
}
//右边全选
rc.onclick = function(){
rightAll();
}
}
//把上面封装起来
function RelativeMethods(num){
new DataRelative(document.getElementsByClassName("data-left"+num)[0],document.getElementsByClassName("data-right"+num)[0],document.getElementById("left-checked"+num),document.getElementById("right-checked"+num),document.getElementById("add"+num),document.getElementById('remove'+num),document.getElementsByClassName("data-right"+num)[0].getElementsByTagName("input"),document.getElementsByClassName("data-left"+num)[0].getElementsByTagName("input")
,document.getElementsByClassName("data-left"+num)[0].getElementsByTagName("span"),document.getElementsByClassName("data-right"+num)[0].getElementsByTagName("span"));
}
//用户的搜索
function searchUser(left_user,add_user_span,add_user1_span,nums){
$('#'+left_user).html(adduser);//先把原本数据显示出来 然后在进行搜索
$('#'+add_user1_span).each(function(){
let a = this.innerHTML;
$('#'+add_user_span).each(function () {
if (this.innerHTML==a){
$(this.parentNode).html("")
}
})
})
let listuser = [];
$('#'+add_user_span).each(function(){
if (this.innerHTML.match($('#list_user').val())){
listuser.push(this.parentNode);
}
})
$('#'+left_user).html(listuser)
if ($('#'+left_user).html()==""){
$('#'+left_user).html("<span style='font-size: 12px;margin-left: 36%;color: #8391a5;'>无数据...</span>");
}
RelativeMethods(nums);
}
js左右选项移动的更多相关文章
- Web前端——表单提交和Js添加选项
表单 表单提交 表单提交之后会将表单的数据以get或post方式,传送到action要打开的页面 方式1: 使用提交按钮 <form action="" method=&qu ...
- 全面掌握Node命令选项
全面掌握Node命令选项 译者按:作为Node.js开发者,有必要全面了解一下节点命令的所有选项,这样在关键时刻才能得心应手. 原文:掌握Node.js的CLI和命令行选项 译者:Fundebug 为 ...
- jquery.form.js 使用以及问题(表单异步提交)
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
- 动态加载JS函数
一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 代码如下: <script type="text/javascript" src=&q ...
- 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...
- 使用Vue.js 和Chart.js制作绚丽多彩的图表
前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自 ...
- Video.js随笔记
下载与介绍 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更有自定义皮肤,插件,组件,语言还有丰富的选项配置. 官网下载地址:https://videojs.com/ ...
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
随机推荐
- Jmeter 如何发起一个Get请求
举例平台:https://www.juhe.cn/docs/api/id/65 前提条件: 1)要在聚合网站注册实名认证才可以收到Key,用于Get请求的参数数值 2)Jmeter本地安装好 3.这是 ...
- 20200213springboot日记
------------恢复内容开始------------ ------------恢复内容开始------------ ------------恢复内容开始------------ 数据库管理 L ...
- 2.4G芯片
一 南京中科微: Si24R1GFSK无线收发芯片 Si24R1专为低功耗无线通信应用场合设计.工作频率为2400MHz-2525MHz,共有126个1MHz带宽的信道:典型应用:有源RFID. ...
- 转:HttpClient使用详解
一.使用方法 使用HttpClient发送请求.接收响应很简单,一般需要如下几步即可. 1. 创建HttpClient对象. 2. 创建请求方法的实例,并指定请求URL.如果需要发送GET请求,创建H ...
- sftp和FTP
sftp 是一个交互式安全文件传输协议的传输程式.它类似于 ftp也叫internet网络文件协议, 但它进行加密传输,比FTP有更高的安全性.下边就简单介绍一下如何远程连接主机,进行文件的上传和下 ...
- OpenTSDB 写入数据
1. 关于 Metrics, value, tag name, tag value opentsdb的每个时间序列必须有一个metric和一个或多个tag对,每个时间序列每小时的数据保存一行.open ...
- 树莓派4B踩坑指南 - (1)系统简介及特性
系统简介及特性 19年双十一入坑树莓派4B,发现不是一般的坑,对于新出来的4B,从外包装壳,到接口,到内核,很多老的资料已经不再适用,又没有什么特别大的论坛可以讨论,只能自己一点点的摸索. 所以将遇到 ...
- AVL-Tree (平衡二叉树)
看到网上AVL-Tree大多数都是用相同的实现方式 —— 递归进行插入.删除.维护平衡等,而我比较喜欢用带父指针的数据结构,于是想了一下午,用C实现了一个迭代版的. 由于没有暂时没有好的画二叉树的工具 ...
- VScode小白简介
前言 现在使用Vscode编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点收货了一大批忠实粉丝 最近因项目需要开始使用Vscode,但不知为何,感觉有点力不从心,不知道该怎么用 首先想到去官 ...
- centos6.5安装图形操作界面
yum -y install xorg-x11-fonts-Type1 #安装Xwindow yum -y groupinstall "X Window System" #安装GN ...