1、实现全选/所有选/反选按钮功能

时间 2019-12-08

标签实现全选所有按钮功能繁體版

原文原文链接

1、效果演示

请选择你所掌握的语言：javascript

全选/全不选
Java JavaScript php Python
php

2、源码展现

 <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>

3、总结

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