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

最新推荐文章于 2022-12-24 15:40:12 发布

weixin_33686714

最新推荐文章于 2022-12-24 15:40:12 发布

阅读量905

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python php ViewUI

原文链接：http://www.cnblogs.com/lyajs/p/5974543.html

本文介绍了一个简单的网页示例，使用JavaScript实现对多个复选框进行全选、全不选及反选的功能。通过点击按钮即可轻松切换复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果演示

请选择你所掌握的语言：

全选/全不选
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>