zoukankan      html  css  js  c++  java
  • 快速取出选中checkbox的值

    原料:jquery

    直接上代码

    html代码

    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
     
          <input type="checkbox" value="男">男<br/>
          <input type="checkbox" value="女">女<br/>
    
        <input type="checkbox" value="男1">男1<br/>
        <input type="checkbox" value="女2">女2<br/>
    
        <input type="checkbox" value="男3">男3<br/>
        <input type="checkbox" value="女4">女4<br/>
      
        <input type="button" id="btn" value="btn">
        <script src="/assets/js/jquery1.12.4.js"></script>
      </body>
    </html>
    

     script代码

      <script>
          $("#btn").click(function () {
              var re = [];
              $("body").find("input[type='checkbox']:checked").each(function() {re.push($(this).val());
            })
              console.log(re.join("/"));
          });
    
    
       ;
    
      </script>
    

      实例:

    结果:

    另一种写法(编译器编辑 语法可能会变成红色的,不影响使用)

      原料:css3的选择器

    html代码

    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
    
          <input type="checkbox" value="男">男<br/>
          <input type="checkbox" value="女">女<br/>
    
        <input type="checkbox" value="男1">男1<br/>
        <input type="checkbox" value="女2">女2<br/>
    
        <input type="checkbox" value="男3">男3<br/>
        <input type="checkbox" value="女4">女4<br/>
    
          <input type="button"  onclick="box()" value="btn1" />
      <script>
    
        function box() {
            var res = [];
            document.querySelectorAll("body input:checked").forEach((e)=>{
                if(e.checked){
                    res.push(e.value);
                }
            });
            console.log(res.join("/"));
        }
    
    
      </script>
      </body>
    </html>
    

      结果:

     

  • 相关阅读:
    MVC 传值
    LINQ to SQL 语句(2)之 Select/Distinct
    LINQ to SQL 语句(1)之 Where
    输入变量相同情况下,结果不正确
    vmware ubuntu 切换终端命令行
    汉字编码问题
    Windows API所提供的功能可以归为七类
    比较好的c++博文
    环境和库的引入
    C#调用Fortran生成的DLL的方法报内存不足
  • 原文地址:https://www.cnblogs.com/oukele/p/9528142.html
Copyright © 2011-2022 走看看