一、实现全选/全部选/反选按钮功能

一、效果演示

请选择你所掌握的语言：

全选/全不选
Java JavaScript php Python

二、源码展示

 <script type="application/javascript">
          $().ready(function(){
              //选择所有的input类型为checkbox且name="items"，通过attr改变其checked属性
              $("#checkItems").click(function(){
                  if($(this).attr("checked")){
                      $(":checkbox[name='items']").attr("checked",true);
                  }else{
                      $(":checkbox[name='items']").attr("checked",false);
                  }
              });
              //选择所有的input类型为checkbox且name="items"，遍历每一项将其取反
              $("#check_reversal").click(function(){
                  $(":checkbox[name='items']").each(function(){
                      if($(this).attr("checked")){
                          $(this).attr("checked",false);
                      }else{
                          $(this).attr("checked",true)
                      }
                  });
              });
          });
  </script>
  <body>
      请选择你所掌握的语言：
       <br>
     <input type="checkbox" name="checkItems"  id="checkItems" value="全选/全不选"/>全选/全不选
     <br/>
        <input type="checkbox" name="items" value="Java" />Java
        <input type="checkbox" name="items" value="JavaScript"/>JavaScript
        <input type="checkbox" name="items" value="php"/>php
        <input type="checkbox" name="items" value="Python"/>Python
        <br/>
        <input type="button" name="checkall" id="check_reversal" value="反选" />
  </body>

三、总结

$(this)：代表当前对象。

 

posted @ 2016-10-18 19:17  LyJs  阅读(3315)  评论(1)  编辑  收藏  举报