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

本文介绍了一个简单的网页示例,使用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>

三、总结

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

 

转载于:https://www.cnblogs.com/lyajs/p/5974543.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值