zoukankan      html  css  js  c++  java
  • jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行

    要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>checkbox</title>
    </head>
    
    <body>
      <input type="button" id="btn1" value="全选">
      <input type="button" id="btn2" value="取消全选">
      <input type="button" id="btn3" value="选中所有奇数">
      <input type="button" id="btn4" value="反选">
      <input type="button" id="btn5" value="获得选中的所有值">
    
      <input type="checkbox" value="checkbox1" />
      <input type="checkbox" value="checkbox2" />
      <input type="checkbox" value="checkbox3" />
      <input type="checkbox" value="checkbox4" />
      <input type="checkbox" value="checkbox5" />
    
      <script src="js/jquery-3.2.0.min.js"></script>
      <script>
        $(function () {
          var checkbox = $("input[type=checkbox]");
    
          $("#btn1").on("click", function () {
            checkbox.prop("checked", true);
          });
    
          $("#btn2").on("click", function () {
            checkbox.prop("checked", false);
          });
    
          $("#btn3").on("click", function () {
            $("input[type=checkbox]:even").prop("checked", true);
          });
    
          $("#btn4").on("click", function () {
            checkbox.each(function () {
              if ($(this).prop("checked")) {
                $(this).prop("checked", false);
              } else {
                $(this).prop("checked", true);
              }
            });
          });
    
          $("#btn5").on("click", function () {
            var str = "";
            $("input[type=checkbox]").each(function () {
              if ($(this).prop("checked")) {
                str += $(this).val() + ",";
              }
    
            });
            console.log(str);
          });
    
        });
      </script>
    </body>
    </html>
    

      

  • 相关阅读:
    libcurl的内存泄露的坑
    Linux 经典面试题(转)
    全栈项目|小书架|服务器开发-Koa2 全局异常处理
    强大的CompletableFuture
    如何进行kubernetes问题的排障
    Golang的json包
    JAVA面试题:Spring中bean的生命周期(转)
    建造者模式
    Netty学习篇④-心跳机制及断线重连
    Fabric1.4:手动启动 first-network 网络(三)
  • 原文地址:https://www.cnblogs.com/jinbang/p/6681690.html
Copyright © 2011-2022 走看看