1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>多选框问题</title>
7 </head>
8
9 <body>
10 <!--<input type="text" data-bind-content="name" />
11 <span data-bind-content='name'></span>-->
12
13 <h4>选择区</h4>
14 <div>
15
16 <ul id="ul1">
17 <li>全选<input type="checkbox" name="checkall" /></li>
18 <li><input type="checkbox" name="checkthis" /><span>1</span></li>
19 <li><input type="checkbox" name="checkthis" /><span>2</span></li>
20 <li><input type="checkbox" name="checkthis" /><span>3</span></li>
21 <li><input type="checkbox" name="checkthis" /><span>4</span></li>
22 <li><input type="checkbox" name="checkthis" /><span>5</span></li>
23 </ul>
24 </div>
25
26 <button id="add">添加</button>
27 <h4>展示区</h4>
28 <ul id="ul2"></ul>
29 </body>
30 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
31 <script type="text/javascript">
32 //封装
33 var checkBox = (function () {
34 var globalV = [];
35 var yourChose = function (tableId, addClickId, showId) {
36 console.log($('#' + tableId + ' input[name=checkall]'));
37 //全选
38 $('#' + tableId + ' input[name=checkall]').click(function () {
39 //如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中
40 if ($(this).prop('checked')) {
41 $('#' + tableId + ' input[name=checkthis]').prop('checked', true);
42 //全选的时候,将所有选框的数据取出来传给全局变量globalV
43 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
44 var choseDate = {};
45 choseDate.isChecked = true;
46 choseDate.id = $(ele).parent().children('span').html();
47 globalV.push(choseDate);
48 });
49 } else {
50 $('#' + tableId + ' input[name=checkthis]').prop('checked', false);
51 }
52 console.log(globalV);
53 })
54 //对各个选择框绑定事件
55 $('#' + tableId).on('change', 'input[name=checkthis]', function () {
56 var arr = [];//存储每个选择框的状态
57 var choseDate = {};//存储被选中的选择框的数据
58 //<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值
59 var this_value = $(this).parent().children('span').html();
60 //遍历每个选择框取选择的状态
61 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
62 arr.push($(ele).prop('checked'));
63 });
64 //如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态
65 if (arr.indexOf(false) == -1) {
66 $('#' + tableId + ' input[name=checkall]').prop('checked', true);
67 } else {
68 $('#' + tableId + ' input[name=checkall]').prop('checked', false);
69 }
70 //对应每个选择框的change事件,如果这个选择框选中,则存储这个选择框的数据,否则遍历存储数据的变量,移除这个取消选中的的选择框的数据
71 if ($(this).is(':checked')) {
72 choseDate.isChecked = true;
73 choseDate.id = this_value;
74 globalV.push(choseDate);
75 } else {
76 for (var i = 0; i < globalV.length; i++) {
77 if (this_value == globalV[i].id) {
78 globalV.splice(i, 1);
79 }
80 }
81 }
82 console.log(globalV);
83 });
84 //点击添加按钮的事件
85 $('#'+addClickId).click(function (e) {
86 e.preventDefault();
87 $('#'+showId).empty();//清空展示区里面的内容
88 console.log(globalV);
89 //如果没有选中任何选择框,则弹出提示
90 if (globalV.length == 0) {
91 alert('请先选择!');
92 } else {
93 //如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量
94 for (var j = 0; j < globalV.length; j++) {
95 //按照全局变量globalV,给展示区创建元素;(包含了删除按钮)
96 var liElement = '<li>\
97 <span>'+ globalV[j].id + '</span>\
98 <p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\
99 </li>';
100 $('#'+showId).append(liElement);
101 }
102 //给删除按钮添加点击事件
103 $('#'+showId).on('click', 'p', function () {
104 //var findAndChangeState=$(this).parent('li').children('span').html();
105 //找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框
106 //由这个值来查找对应的选择框,从而改变选择框的状态;
107 //这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除
108 var findAndChangeState = $(this).parent('li').children('span').html();
109 //遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中
110 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
111 if ($(this).parent().children('span').html() == findAndChangeState) {
112 $(this).parent().children('input').prop('checked', false);
113 $('#' + tableId + ' input[name=checkall]').prop('checked', false);
114 }
115 });
116 //改完之后这个删除按钮对应的父级标签
117 $(this).parent('li').remove();
118 })
119 }
120 })
121 };
122 return {
123 globalV:globalV,
124 yourChose:yourChose
125 }
126 })()
127 checkBox.yourChose('ul1', 'add', 'ul2')
128 </script>
129
130 </html>
下面这个是我最开始的写的,其实也没变多少.....
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>多选框问题</title>
7 </head>
8
9 <body>
10 <!--<input type="text" data-bind-content="name" />
11 <span data-bind-content='name'></span>-->
12
13 <h4>选择区</h4>
14 全选<input type="checkbox" name="check-all" />
15 <ul id="ul1">
16 <li><input type="checkbox" name="check-this" /><span>1</span></li>
17 <li><input type="checkbox" name="check-this" /><span>2</span></li>
18 <li><input type="checkbox" name="check-this" /><span>3</span></li>
19 <li><input type="checkbox" name="check-this" /><span>4</span></li>
20 <li><input type="checkbox" name="check-this" /><span>5</span></li>
21 </ul>
22 <button class="add">添加</button>
23 <h4>展示区</h4>
24 <ul id="ul2"></ul>
25 </body>
26 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
27 <script type="text/javascript">
28 //全局变量,存储传递数据
29 var globalV = [];
30 //全选事件
31 $('input[name=check-all]').click(function () {
32 globalV = [];
33 //如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中
34
35 if ($(this).prop('checked')) {
36 $('input[name=check-this]').prop('checked', true);
37 //全选的时候,将所有选框的数据取出来传给全局变量globalV
38 $('#ul1 li').each(function (i, ele) {
39 var choseDate = {};
40 choseDate.isChecked = true;
41 choseDate.id = $(ele).children('span').html();
42 globalV.push(choseDate);
43 });
44 } else {
45 $('input[name=check-this]').prop('checked', false);
46 }
47 console.log(globalV);
48 })
49 //对各个选择框绑定事件
50 $('#ul1').on('change', 'input[name=check-this]', function () {
51 var arr = [];//存储每个选择框的状态
52 var choseDate = {};//存储被选中的选择框的数据
53 //<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值
54 var this_value = $(this).parent('li').children('span').html();
55 //遍历每个选择框取选择的状态
56 $('input[name=check-this]').each(function (i, ele) {
57 arr.push($(ele).prop('checked'));
58 });
59 //如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态
60 if (arr.indexOf(false) == -1) {
61 $('input[name=check-all]').prop('checked', true);
62 } else {
63 $('input[name=check-all]').prop('checked', false);
64 }
65 //对应每个选择框的change事件,如果这个选择框选中,则存储这个选择框的数据,否则遍历存储数据的变量,移除这个取消选中的的选择框的数据
66 if ($(this).is(':checked')) {
67 choseDate.isChecked = true;
68 choseDate.id = this_value;
69 globalV.push(choseDate);
70 } else {
71 for (var i = 0; i < globalV.length; i++) {
72 if (this_value == globalV[i].id) {
73 globalV.splice(i, 1);
74 }
75 }
76 }
77 console.log(globalV);
78 })
79 //点击添加按钮的事件
80 $('button.add').click(function (e) {
81 e.preventDefault();
82 $('#ul2').empty();//清空展示区里面的内容
83 console.log(globalV);
84 //如果没有选中任何选择框,则弹出提示
85 if (globalV.length == 0) {
86 alert('请先选择!');
87 } else {
88 //如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量
89 for (var j = 0; j < globalV.length; j++) {
90 //按照全局变量globalV,给展示区创建元素;(包含了删除按钮)
91 var liElement = '<li>\
92 <span>'+ globalV[j].id + '</span>\
93 <p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\
94 </li>';
95 $('#ul2').append(liElement);
96 }
97 //给删除按钮添加点击事件
98 $('#ul2').on('click', 'p', function () {
99 //var findAndChangeState=$(this).parent('li').children('span').html();
100 //找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框
101 //由这个值来查找对应的选择框,从而改变选择框的状态;
102 //这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除
103 var findAndChangeState = $(this).parent('li').children('span').html();
104 //遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中
105 $('#ul1 li').each(function (i, ele) {
106 if ($(this).children('span').html() == findAndChangeState) {
107 $(this).children('input').prop('checked', false);
108 $('input[name=check-all]').prop('checked', false);
109 }
110 });
111 //改完之后这个删除按钮对应的父级标签
112 $(this).parent('li').remove();
113 })
114 }
115 })
116 </script>
117
118 </html>
目的就是想就这个demo看看高质量代码怎么写,好提高自己,还请各位大神多多教导,谢谢
* 类型判断
* public method :
* tn.type.isArray()
* tn.type.isBoolean()
* tn.type.isFunction()
* tn.type.isNull()
* tn.type.isNumber()
* tn.type.isObject()
* tn.type.isString()
* tn.type.isUndefined()
* tn.type.isDefined()
* tn.type.isNumeric()
* tn.type.isDate()
*/
type: {
isArray: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (Array.isArray && !Array.isArray(c) || !(module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Array") > -1 || c instanceof Array))) {
return false;
}
}
return true;
},
isBoolean: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "boolean" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Boolean") > -1 || c instanceof Boolean))) {
return false;
}
}
return true;
},
isFunction: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
if (typeof arguments[b] !== "function") {
return false;
}
}
return true;
},
isNull: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (c === null || module.tn.type.isUndefined(c)) {
return true;
}
}
return false;
},
isNumber: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "number" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Number") > -1 || c instanceof Number)) || isNaN(c)) {
return false;
}
}
return true;
},
isObject: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (typeof c !== "object" || c === null) {
return false;
}
}
return true;
},
isString: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "string" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("String") > -1 || c instanceof String))) {
return false;
}
}
return true;
},
isUndefined: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
if (typeof arguments[b] === "undefined") {
return true;
}
}
return false;
},
isDefined: function() {
for (var a = 0; a < arguments.length; a++) {
if (module.tn.type.isUndefined(arguments[a])) {
return false;
}
}
return true;
},
isNumeric: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(!isNaN(c) && isFinite(c) && (c !== null) && !module.tn.type.isBoolean(c) && !module.tn.type.isArray(c))) {
return false;
}
}
return true;
},
isDate: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
o = arguments[b];
if (!(module.tn.type.isObject(o) && o.constructor && (o.constructor.toString().indexOf("Date") > -1 || o instanceof Date))) {
return false;
}
}
return true;
}
},
我是写后端的,谈不上高质量,平时做项目一些工具类,重复调用的插件方法,放在一个js文件里,格式规范,便于阅读维护就差不多了,如果是封装插件,想想那些可变参数做为入参,把执行方法拆分几步,相互调用..
谢谢,谢谢,麻烦你了,已收藏你提供的代码,
你这个具有业务相关的逻辑,可能并不适合单独封装
- 首先,你的初版代码我拿来一用,感觉bug不少(双击‘全选’,然后‘添加’.....),本来还知道你想实现什么,点到后面我都不知道你到底要干嘛了...跟我有的一拼了。
- 优化代码前先把思路理清了,你代码看得逻辑没什么问题,但数据啊、画面状态啊,这边那边都在改,互相牵扯,不容易拓展,过段时间回来改bug得酝酿半天。
- 你的封装思路还是可以的,我暂且在你的大架子上改一版,思路应该明确一些,一个函数该干什么就干什么,函数功能间尽量别重复,你之前代码就有点太“直观”,眼下该干什么就干什么,好点的思路是“记住你该干些什么,然后把该干的事儿分类一起干了”
- 这里面有一点mvc的影子,你可以去慢慢理解下mvc的思想,我最经也在学习
<!--
event{
select:fun1,
add:fun2,
remove:fun3,
}
mvc:
model
controller
view
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多选框问题</title>
</head>
<body>
<!--<input type="text" data-bind-content="name" />
<span data-bind-content='name'></span>-->
<h4>选择区</h4>
<div>
<ul id="ul1">
<li>全选<input type="checkbox" name="checkall" /></li>
<li><input type="checkbox" name="checkthis" /><span>1</span></li>
<li><input type="checkbox" name="checkthis" /><span>2</span></li>
<li><input type="checkbox" name="checkthis" /><span>3</span></li>
<li><input type="checkbox" name="checkthis" /><span>4</span></li>
<li><input type="checkbox" name="checkthis" /><span>5</span></li>
</ul>
</div>
<button id="add">添加</button>
<h4>展示区</h4>
<ul id="ul2"></ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//封装
var checkBox = (function () {
var globalV = [];
var yourChose = function (tableId, addClickId, showId) {
//负责更新数据
var updateData = function(){
globalV = [];
$('#' + tableId + ' input[name=checkthis]').each(function(){
if ($(this).is(':checked')) {
var choseDate = {};
var this_value = $(this).parent().children('span').html();
choseDate.isChecked = true;
choseDate.id = this_value;
globalV.push(choseDate);
}
});
}
//负责更新画面
//checkBox状态
function fun1(){
if($(this).attr("name")=="checkthis"){
var arr = [];//存储每个选择框的状态
var choseDate = {};//存储被选中的选择框的数据
//<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值
var this_value = $(this).parent().children('span').html();
//遍历每个选择框取选择的状态
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
arr.push($(ele).prop('checked'));
});
//如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态
if (arr.indexOf(false) == -1) {
$('#' + tableId + ' input[name=checkall]').prop('checked', true);
} else {
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
}else{
//如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中
if ($(this).prop('checked')) {
$('#' + tableId + ' input[name=checkthis]').prop('checked', true);
} else {
$('#' + tableId + ' input[name=checkthis]').prop('checked', false);
}
}
}
//展示区状态(新增)
function fun2(){
$('#'+showId).empty();//清空展示区里面的内容
updateData();
//如果没有选中任何选择框,则弹出提示
if (globalV.length == 0) {
alert('请先选择!');
} else {
//如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量
for (var j = 0; j < globalV.length; j++) {
//按照全局变量globalV,给展示区创建元素;(包含了删除按钮)
var liElement = '<li>\
<span>'+ globalV[j].id + '</span>\
<p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\
</li>';
$('#'+showId).append(liElement);
}
//给删除按钮添加点击事件
bindEvent('#'+showId +' p',"click",event.removeLi);
}
}
//展示区状态(删除)
function fun3(){
//var findAndChangeState=$(this).parent('li').children('span').html();
//找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框
//由这个值来查找对应的选择框,从而改变选择框的状态;
//这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除
var findAndChangeState = $(this).parent('li').children('span').html();
//遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
if ($(this).parent().children('span').html() == findAndChangeState) {
$(this).parent().children('input').prop('checked', false);
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
});
//改完之后这个删除按钮对应的父级标签
$(this).parent('li').remove();
}
//负责注册事件
var event = {
select:fun1,
add:fun2,
removeLi:fun3
};
var bindEvent = function(selector,type,fun){
$(selector).bind(type,fun);
};
//对各个选择框绑定事件
bindEvent('#' + tableId + ' input[type=checkbox]',"click",event.select);
//点击添加按钮的事件
bindEvent('#'+addClickId,"click",event.add);
};
return {
globalV:globalV,
yourChose:yourChose
}
})()
checkBox.yourChose('ul1', 'add', 'ul2');
</script>
</html>