<!DOCTYPE html >
< html lang= "en" >
< script type= "text/javascript" src= "../jquery-2.1.4.min.js" ></ script >
< head >
< meta charset= "UTF-8" >
< title > 全选与反全选 </ title >
</ head >
< body >
< input type= "checkbox" id= "all" > 全选
< hr />
< input type= "checkbox" name= "p" > 1 < br />
< input type= "checkbox" name= "p" > 2 < br />
< input type= "checkbox" name= "p" > 3 < br />
</ body >
< script >
</ script >
</ html > 在script中添加如下代码实现原生Js反选与全选: //原生Js实现反选全选。 var all = document . getElementById ( 'all' );
all .onclick = function (){
var inp = document . getElementsByName ( 'p' );
for ( var i = 0 , len = inp . length ; i < len ; i ++ ){
inp [ i ]. checked = all . checked ;
}
}
在script中添加如下代码利用Jquery实现全选与反选: $ ( function (){
$ ( "#all" ).click( function (){
if ( this . checked ){
$ ( "input[name='p']" ). prop ( 'checked' , this . checked );
} else {
$ ( "input[name='p']" ). prop ( 'checked' , false );
}
});
}); 利用Jquery实现的时候需要注意的一个问题:Jquery在1.6+才支持prop。如果写成: if ( this . checked ){
$ ( "input[name='p']" ). attr ( 'checked' , true );
} else {
$ ( "input[name='p']" ). attr ( 'checked' , false );
} 这样是不可行的。