全选，反选，获取全选数据填充到另外区域的简单操作

本文主要是介绍全选，反选，获取全选数据填充到另外区域的简单操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 <!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 > 