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是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
随机推荐
- PHPStorm 使用 Xdebug
一.下载xdebug xdebug官网:https://xdebug.org/download.php 在选择下载哪个版本的xdebug的时候需要注意了,下面有两种方法,让你准确的下载自己环境对应的x ...
- 使用maven搭建web项目
在pom.xml中添加java ee相关的三个依赖包:<scope> jar的有效范围 provided 表示编译期生效,不会打包发布到 tomcat 中 <properties&g ...
- Linux(Centos)安装图形化界面步骤
最近有重新来捣鼓捣鼓Linux了,这次撸的版本是centos7.4的,虽然说是不要桌面,但是感觉还是安装一下比较好balalalala.........废话不说的直接进入正题: 安装X 首先安装X(X ...
- nginx 的 content阶段的root指令与alias指令
root 与alias指令 Syntax: alias path; Default: — Context: location Syntax: root path; Default: root html ...
- Windows远程“要求的函数不受支持”解决办法
解决方法: 开启组策略中远程桌面链接安全层.1.开始-运行-gpedit.msc,进入组策略编辑器:2.找到左侧边栏计算机配置-管理模板-Windows组件-远程桌面服务-远程桌面会话主机-安全项:3 ...
- jQuery常用操作(待续)
1. input清空内容 <1> $("#选择器id").val(""); <2> $("input[name='input框 ...
- linux服务器上安装jdk8的两种方法
这里介绍两种安装方式: yum安装(力荐) 从官网下载包安装 获得一台linux服务器 要在linux下安装jdk,首先你得先有一台linux服务器,虚拟机或者租一台都可以 yum安装jdk 在l ...
- 一个DBA的雄心壮志
math-liu, 一个甲方的DBA,同时他还有另外一个名字“怕提神”.在某甲方工作的他最近这几年如打了鸡血一般工作起来完全由拼命三郎的那股劲,据说能唯一使他感到一丝鼓励和安慰的是以下这两位大牛前辈. ...
- 8.Memcache
1.概述 (1) Memcached是什么 Memcached是一款开源的.高性能的.分布式的内存对象缓存系统 (2) Memcached能干什么 最主要的功能就是:在内存中缓存数据,以减轻数据库负载 ...
- LibreOJ #6001. 「网络流 24 题」太空飞行计划
\(\quad\) 与网络流有关的最值有三个:最大流,最小费用,最小割.这道题是最小割.想了好久,终于想明白最小割应该怎么用. \(\quad\) 先找出矛盾的事物.在这道题中,两件事是矛盾的:做实验 ...