jQuery练习 -全选/全不选
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< script type= "text/javascript" src= "../../script/jquery-1.7.2.js" > < / script>
< script type= "text/javascript" >
$( function ( ) {
var $checkboxitems = $( ":checkbox[name='items']" ) ;
var $checkbox = $( ":checkbox" ) ;
$( "#checkedAllBox" ) . click ( function ( ) {
$checkboxitems. prop ( "checked" , this . checked) ;
} ) ;
$( "#checkedAllBtn" ) . click ( function ( ) {
$checkbox. prop ( "checked" , true ) ;
} ) ;
$( "#checkedNoBtn" ) . click ( function ( ) {
$checkbox. prop ( "checked" , false ) ;
} ) ;
$( "#checkedRevBtn" ) . click ( function ( ) {
$checkboxitems. each ( function ( ) {
this . checked= ! this . checked;
} ) ;
var allCount = $checkboxitems. length;
var checkedCount = $( ":checkbox[name='items']:checked" ) . length;
$( "#checkedAllBox" ) . prop ( "checked" , checkedCount== allCount) ;
} ) ;
$( "#sendBtn" ) . click ( function ( ) {
$checkboxitems. filter ( ":checked" ) . each ( function ( ) {
alert ( this . value) ;
} ) ;
} ) ;
$( ":checkbox[name='items']" ) . click ( function ( ) {
var allCount = $checkboxitems. length;
var checkedCount = $( ":checkbox[name='items']:checked" ) . length;
$( "#checkedAllBox" ) . prop ( "checked" , checkedCount== allCount) ;
} ) ;
} ) ;
< / script>
< / head>
< body>
< form method= "post" action= "" >
你爱好的运动是?< input type= "checkbox" id= "checkedAllBox" / > 全选/ 全不选
< br / >
< input type= "checkbox" name= "items" value= "足球" / > 足球
< input type= "checkbox" name= "items" value= "篮球" / > 篮球
< input type= "checkbox" name= "items" value= "羽毛球" / > 羽毛球
< input type= "checkbox" name= "items" value= "乒乓球" / > 乒乓球
< br / >
< input type= "button" id= "checkedAllBtn" value= "全 选" / >
< input type= "button" id= "checkedNoBtn" value= "全不选" / >
< input type= "button" id= "checkedRevBtn" value= "反 选" / >
< input type= "button" id= "sendBtn" value= "提 交" / >
< / form>
< / body>
< / html>