<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>请输入关键词</title>

 <script type="text/javascript" src="js/jquery.min.js"></script>

 </head>

 <body>

 <input type="checkbox" class="ipt">歌曲1<br>

 <input type="checkbox" class="ipt">歌曲2<br>

 <input type="checkbox" class="ipt">歌曲3<br>

 <input type="checkbox" class="ipt">歌曲4<br>

 <input type="checkbox" class="ipt">歌曲5<br>

 <input type="button" class="btn1" value="全选">

 <input type="button" class="btn2" value="全不选">

 <input type="button" class="btn3" value="反选">

 <script type="text/javascript">

 $(function(){

 $(".btn1").click(function(){

 $("input:checkbox").attr("checked",true);

 });

 $(".btn2").click(function(){

 $("input:checkbox").attr("checked",false);

 });

 $(".btn3").click(function(){

 $("input:checkbox").each(function(){

 $(this).attr("checked",!$(this).attr("checked"));

 })

 });

 })

 </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>反选</title>

     <script type="text/javascript">

         //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组

         //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择

         //若没有被选择, 则 name=items 的 checkbox 都要取消选择

         //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择

         //checked = false 取消选择. 

         //还需要给每个  name=items 的 checkbox 加响应函数

         //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.

         //若都被选择: 则使  #checkedAll_2 被选择

        window.onload=function(){

             //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中

         //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中

         //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中

         //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

            document.getElementById("checkedAll_2").onclick=function(){

                var flag=this.checked;

                var items=document.getElementsByName("items");

                for(var i=0;i<items.length;i++){

                    items[i].checked=flag;

                }

            }

            //给每个item添加事件

            var items=document.getElementsByName("items");

             for(var i=0;i<items.length;i++){

                 items[i].onclick=function(){

                     //记录有多少个items被选中了

                     var number=0;

                     for(var j=0;j<items.length;j++){

                         if(items[j].checked){

                             number++;

                         }

                     }

                     document.getElementById("checkedAll_2").checked=(items.length==number);

                 }

             }

            //全选

            document.getElementById("CheckedAll").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = true;

             }

         }

            //全不选

            document.getElementById("CheckedNo").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = false;

             }

         }

            //反选

            document.getElementById("CheckedRev").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = !items[i].checked;

             }

         }

            //提交

            document.getElementById("send").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 if(items[i].checked){

                     alert(items[i].value);

                 }

             }

        }

     </script>

 </head>

 <body>

     <form method="post" action="">

         你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br/>

         <input type="checkbox" name="items"  value="足球" />足球

         <input type="checkbox" name="items"  value="篮球" />篮球

         <input type="checkbox" name="items"m value="羽毛球" />羽毛球

         <input type="checkbox" name="items"  value="乒乓球" />乒乓球<br/>

         <input type="button" id="CheckedAll" value="全　选" />

         <input type="button" id="CheckedNo"  value="全不选" />

         <input type="button" id="CheckedRev" value="反　选" />

         <input type="button" id="send" value="提　交" />

     </form>

 </body>

 </html>