<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>筛选列表
</
title
>
<
link
rel=
"stylesheet"
type=
"text/css"
href=
"css/common.css"
>
<
script
src=
"js/jquery.min.js"
>
<
/
script
>
<
link
rel=
"stylesheet"
type=
"text/css"
href=
"css/select.css"
>
</
head
>
<
body
>
<
div
class=
"select_peo"
>
<
div
class=
"select_peo_con"
>
<
div
class=
""
style=
"width: 320px;float: left;"
>
<
div
class=
"title"
>筛选区
<
input
id=
"checkboxall"
type=
"checkbox"
name=
"checkboxbutton"
onclick=
"funcCheckAll()"
>全选
<
input
id=
"checkboxNotall"
type=
"checkbox"
name=
"checkboxNotall"
onclick=
"funcCheckNotAll()"
>全不选
<
input
id=
"checkboxInverse"
type=
"checkbox"
name=
"checkboxInverse"
onclick=
"funcCheckInverse()"
>反选
</
div
>
<
div
class=
"left"
>
<
div
class=
"areas_list"
id=
"list"
>
<
p
><
input
type=
"checkbox"
name=
"ids"
id=
""
value=
""
onclick=
"checkReturn(this)"
class=
"subcheck"
/>张三
</
p
>
<
p
><
input
type=
"checkbox"
name=
"ids"
id=
""
value=
""
onclick=
"checkReturn(this)"
class=
"subcheck"
/>李四
</
p
>
<
p
><
input
type=
"checkbox"
name=
"ids"
id=
""
value=
""
onclick=
"checkReturn(this)"
class=
"subcheck"
/>王五
</
p
>
<
p
><
input
type=
"checkbox"
name=
"ids"
id=
""
value=
""
onclick=
"checkReturn(this)"
class=
"subcheck"
/>赵六
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class=
"center"
>
<
a
id=
"list_add"
>复制到确认区
</
a
>
<
a
id=
"list_add"
>返回到筛选区
</
a
>
</
div
>
<
div
class=
""
style=
"width: 320px;float: left;"
>
<
div
class=
"title"
>确认区
</
div
>
<
div
class=
"right"
>
</
div
>
</
div
>
<
div
class=
"clear"
></
div
>
<
div
class=
"bot_btn"
>
<
a
onclick=
"do_add(this)"
class=
"a_con do_add"
>确定
</
a
>
<
a
class=
"a_con close_btn"
onclick=
"location.reload()"
>取消
</
a
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
>
function
do_add(
a){
$(
"input[name=ids]").
each(
function(){
if(
$(
this).
prop(
"checked")){
$(
'.right').
append(
$(
this).
parent());
}
});
}
function
checkReturn(
obj) {
var
objIds =
obj.
value;
//当没有选中某个子复选框时,checkboxall取消选中
if (!
$(
".subcheck").
checked) {
$(
"#checkboxall").
attr(
"checked",
false);
}
// 获取subcheck的个数
var
chsub =
$(
"input[type='checkbox'][class='subcheck']").
length;
// 获取选中的subcheck的个数
var
checkedsub =
$(
"input[type='checkbox'][class='subcheck']:checked").
length;
if (
checkedsub ==
chsub) {
// 控制全选按钮的选中
$(
"#checkboxall").
attr(
"checked",
true);
}
}
function
funcCheckAll() {
// 判断全选按钮是否是已选中状态
// $("#checkboxall").prop("checked")说明已选中
// JQuery版本不同，if条件不同
if (
$(
"#checkboxall").
prop(
"checked")) {
// 将各个子单选按钮设为选中状态
$(
'input[name=ids]').
attr(
'checked',
'checked');
}
else {
// 此时全选按钮起到反选作用
// 将选中状态改为非选中
$(
'input[name=ids]').
removeAttr(
'checked');
}
// 将'全不选'按钮置为非选中状态
$(
'input[name=checkboxNotall]').
removeAttr(
'checked');
// 将'反选'按钮置为非选中状态
$(
'input[name=checkboxInverse]').
removeAttr(
'checked');
}
function
funcCheckNotAll() {
// 将选中状态改为非选中
$(
'input[name=ids]').
removeAttr(
'checked');
// 将'全选'按钮置为非选中状态
$(
'input[name=checkboxbutton]').
removeAttr(
'checked');
// 将'反选'按钮置为非选中状态
$(
'input[name=checkboxInverse]').
removeAttr(
'checked');
}
function
funcCheckInverse() {
// 将'全选'按钮置为非选中状态
$(
'input[name=checkboxbutton]').
removeAttr(
'checked');
// 将'全不选'按钮置为非选中状态
$(
'input[name=checkboxNotall]').
removeAttr(
'checked');
// 获取所有子选框
var
checkDelete =
document.
getElementsByName(
"ids");
for(
var
i=
0;
i<
checkDelete.
length;
i++) {
// 判断全选按钮是否是已选中状态
if (
checkDelete[
i].
type ==
"checkbox" &&
checkDelete[
i].
checked) {
// 将子选框设为非选中状态
checkDelete[
i].
checked =
false;
}
else {
// 将子选框设为选中状态
checkDelete[
i].
checked =
true;
}
}
}
<
/
script
>
</
html
>