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是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
随机推荐
- XCOJ 1008: 级数求和
1008: 级数求和 题目描述 已知:Sn= 1+1/2+1/3+…+1/n.显然对于任意一个整数K,当n足够大的时候,Sn大于K.现给出一个整数K(1<=k<=15),要求计算出一个最小 ...
- PXE无人值守实现批量化自动安装Linux系统
设想一个场景:假如让你给1000台服务器装系统,你会怎么做?跑去每一台服务器给它安装系统吗?显然不会.. 一.概括 通过网络引导系统的做法可以不必从硬盘.软盘或CD-ROM硬盘,而是完全通过网络来引导 ...
- UITextField的快速基本使用代码块
概述 UITextField在界面中显示可编辑文本区域的对象. 您可以使用文本字段来使用屏幕键盘从用户收集基于文本的输入.键盘可以配置许多不同类型的输入,如纯文本,电子邮件,数字等等.文本字段使用目标 ...
- 了解jQuery
前言-- 通过这篇文章[https://www.cnblogs.com/cchHers/p/9880439.html]了解到JavaScript是编写控制器这种角色语言.文章中也提到了web开始是一门 ...
- win10的guard占内存过高
转自:https://zhidao.baidu.com/question/1180883495203481459.html win10的guard占内存过高,
- 通过getGeneratedKeys获取记录的主键
Connection con=null; PreparedStatement ps=null; ResultSet rs=null; try { //建立连接 con= JDBCUtils.getCo ...
- day4-2数组及方法
数组: Js数组 可以存放任意数据类型的数据 如果索引大于数组的长度,数组自动增加到该索引值加1的长度 var arr = ["terry","larry",& ...
- Python学习笔记004
变量 变量的命名规则1. 要具有描述性2. 变量名只能_,数字,字母组成,不可以是空格或特殊字符(#?<.,¥$*!~)3. 不能以中文为变量名4. 不能以数字开头,下划线或者小写字母开头,驼峰 ...
- Redis 事务在 SpringBoot 中的应用 (io.lettuce.core.RedisCommandExecutionException: ERR EXEC without MULTI)
我们在 SpringBoot 中使用 Redis 时,会引入如下的 redis starter <dependency> <groupId>org.springframewor ...
- Atcoder Grand Contest 037C(贪心,优先队列,思维)
#define HAVE_STRUCT_TIMESPEC//编译器中time.h和phread.h头文件中timespec结构体重名,故加此行#include<bits/stdc++.h> ...