本文主要是介绍全选，反选，获取全选数据填充到另外区域的简单操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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 >
这篇关于全选，反选，获取全选数据填充到另外区域的简单操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
