jquery实现全选功能

<!--HTML部分：-->

< ul >

< li >< input type= "checkbox" class= "chk" id= "checkAll" /><label for="checkAll">全选 </ label ></ li >

< li >< input type= "checkbox" class= "chk chk01" />1</ li >

< li >< input type= "checkbox" class= "chk chk01" />2</ li >

< li >< input type= "checkbox" class= "chk chk01" />3</ li >

< li >< input type= "checkbox" class= "chk chk01" />4</ li >

< li >< input type= "checkbox" class= "chk chk01" />5</ li >

</ ul >

<!--JS部分：-->

< script >

$( document). on( "click", "#checkAll", function(){

$( ".chk01"). prop( "checked", $( this). prop( "checked")) //多选框的状态与全选框状态保持一致

})

$( ".chk01"). each( function(){

$( this). click( function(){

if(! $( this). prop( "checked")){ //多选框有一个未选中 全选变为未选中状态

$( "#checkAll"). prop( "checked", false)

} else if( $( this). prop( "checked")){

$( ".chk01"). each( function( index, ele){

if( $( this). prop( "checked")){

if( index == $( ".chk01"). length - 1){

$( "#checkAll"). prop( "checked", true) //多选框全部选中 全选变为选中状态

}

return true //each()跳过本次循环

} else{

return false //each()跳出循环

}

})

}

})

})

< / script >