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

      

  • 相关阅读:
    一些性能查询的SQL 备忘
    Oracle Stream配置详细步骤
    Oracle 一次生产分库,升级,迁移
    Oracle数据文件和临时文件的管理
    db_recovery_file_dest_size 修改大一点及删除归档日志 |转|
    android启动优化
    C++ primer 中文第三版 阅读笔记 第八章
    XMPP通讯开发-好友获取界面设计
    用SHELL与列表处理了件尴尬事
    各种快递查询--Api接口
  • 原文地址:https://www.cnblogs.com/jinbang/p/6681690.html
Copyright © 2020-2023  润新知