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是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
随机推荐
- bootstrap标记说明
<span class="caret"> 这就是 一个倒三角
- jmeter 并发控制
1.吞吐控制器以线程组的请求sampler为控制对象, 2.事务控制器: 3.同步定时器syn timer:对某线程组下任意的sampler任意位置作用为,有序控制单个sampler的并发先sampl ...
- 转载--php函数使用--var_export
var_export用于将数组转换成字符串 <?php $arr = [ 'key1'=>'val1', 'key2'=>'val2', 'key3'=>'val3', 'ke ...
- git切换分支导致代码丢失找回(git reflog找回错误的重置)
1.使用git reflog查看日志 2.切换到丢失的分支 3. 创建一个临时分支 如(diff),并切换到dev(原分支),然后合并diff到dev分支 4.查看状态 5.强制合并,然后提交到de ...
- GIT使用教程——命令详解
$ git init 当前目录建立GIT可以管理的仓库(版本库),生成一个.git的隐藏文件夹 $ git add <filename> 将工作区的文件修改添加到版本库的暂存区 $ git ...
- nginx sendfile 相关知识
https://blog.csdn.net/wm_1991/article/details/51916027
- Windows密码安全性测试
一.本地管理员密码如何直接提取 1.1直接通过mimikatz读取管理员密码 (不能交互式,不能在webshell下用,图形化界面很好用) 第一条:privilege::debug ...
- FFmpeg调用c语言SDK实现日志的打印
日志文件的三大步 // 导入头文件 #include <libavutil/log.h> // 设置日志级别 av_log_set_level(AV_LOG_DEBUG); //DEBUG ...
- springMVC的执行请求过程
springMVC的运行流程: 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器 3.处理器映 ...
- HTML<head></head>中标签的含义
我们都知道,HTML的标签可以分为很多种,head 里面的我们称为元信息类标签,诸如title.meta.style.link.base.script这些,他们用来描述文档的一些基本信息. 1. ti ...