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是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
随机推荐
- Fiddler一次性发多个请求
Fiddler一次发送多个请求 选中某个请求: 选中 : Raw, 将request数据拷出: 包含请求header和request body 替换request header里面的ASP.NET_S ...
- IDEA 解决 Maven 依赖冲突的高能神器,这一篇够不够?
1.何为依赖冲突 Maven是个很好用的依赖管理工具,但是再好的东西也不是完美的.Maven的依赖机制会导致Jar包的冲突.举个例子,现在你的项目中,使用了两个Jar包,分别是A和B.现在A需要依 ...
- 误删Django的model中的表解决办法
误删Django的model中的表解决办法 1.model里面的表格实际的操作都在migrations文件夹中,里面记录了操作过程,当在database和model中删除表格时要注意初始化数据库时会报 ...
- 关于热部署Devtools出现同一个类型进行类型转换失败的问题
背景: 最近在和学长们做一个小系统,在进行任务调度的设置的时候会出现类型转换失败的错误,原本是同一个类型的,不应该出现类型转换失败的问题,起初以为是序列化的问题,回来发现并不是这个原因, 报错截图: ...
- requests库 cookie和session
cookie 如果一个相应中包含了cookie,那么可以利用cookie属性拿到这个返回的cookie值: res = requests.get('http://www.baidu.com') pri ...
- HDU 5587:Array
Array Accepts: 118 Submissions: 232 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/ ...
- springboot下使用dubbo的简单demo
1.一些话 现在java后端开发大多用springboot来简化环境搭建,现在一直使用的是springcloud和k8s有关的东西,以前用过dubbo,但那会儿的开发环境搭建流程较为繁琐,而且不支持r ...
- Spring_MVC 21问
1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,C ...
- Java 对不同类型的数据文件的读写操作整合器[JSON,XML,CSV]-[经过设计模式改造](2020年寒假小目标03)
日期:2020.01.16 博客期:125 星期四 我想说想要构造这样一个通用文件读写器确实不容易,嗯~以后会添加更多的文件类型,先来熟悉一下文件内容样式: <?xml version=&quo ...
- Eclipse配置maven和新建maven工程
1 安装配置Maven 1.1 下载Maven 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http:/ ...