zoukankan      html  css  js  c++  java
  • Jquery 读取表单选中值

    1、获取复选框的选中值

    <title> JS 获取复选框选中的值</title>
    <script src="jquery-1.11.2.min.js"></script>
    
    </head>
    
    <body>
    <input type="checkbox" value="01" class="ck" />
    <input type="checkbox" value="02" class="ck" />
    <input type="checkbox" value="03" class="ck" />
    <input type="checkbox" value="04" class="ck" />
    <input type="checkbox" value="05" class="ck" />
    <input type="button" value="取选中" id="btn"  />
    
    <script type="text/javascript">
        
        $("#btn").click(function(e) {
            var ck = $(".ck");
            for(var i=0;i<ck.length;i++ )
            {
                if(ck[i].checked)
                {
                    alert (ck[i].value);
                }
            }
        });
    
    </script>

    JQUERY

    <title> JQUERY 获取复选框选中的值</title>
    <script src="jquery-1.11.2.min.js"></script>
    
    </head>
    
    <body>
    <input type="checkbox" value="01" class="ck" />
    <input type="checkbox" value="02" class="ck" />
    <input type="checkbox" value="03" class="ck" />
    <input type="checkbox" value="04" class="ck" />
    <input type="checkbox" value="05" class="ck" />
    <input type="button" value="取选中" id="btn"  />
    
    <script type="text/javascript">
        
        $("#btn").click(function(e) {
            var ck = $(".ck");
            for(var i=0;i<ck.length;i++ )
            {
                if(ck.eq(i).prop("checked"))
                {
                    alert (ck.eq(i).val());
                }
            }
        });
    
    </script>

    2. JQUERY 取单选框的选中值

    <title> JQUERY 取单选框的选中值</title>
    <script src="jquery-1.11.2.min.js"></script>
    
    </head>
    
    <body>
    
    <input type="radio" value="01" class="rd" name="a" />
    <input type="radio" value="02" class="rd"name="a" />
    <input type="radio" value="03" class="rd" name="a" />
    <input type="radio" value="04" class="rd" name="a"/>
    <input type="radio" value="05" class="rd" name="a"/>
    <input type="button" value="取单选" id="b2"  />
    
    <script type="text/javascript">
        
        $("#b2").click(function(e) {
            var B = $(".rd");
            for(var i=0;i<B.length;i++)
            {
                if(B.eq(i).prop("checked"))
                alert (B.eq(i).val());
            }
        });
    
    </script>

    3. JQUERY 取复选框选中的值,这里不能用attr(),会出现Bug,所以会用prop()属性,然后将自身的状态再给到复选框

    <title>JQUERY 取复选框选中的值</title>
    <script src="jquery-1.11.2.min.js"></script>
    
    </head>
    
    <body>
    <input type="checkbox" id="qx" />全选
    <input type="checkbox" value="01" class="ck" />01
    <input type="checkbox" value="02" class="ck" />02
    <input type="checkbox" value="03" class="ck" />03
    <input type="checkbox" value="04" class="ck" />04
    <input type="checkbox" value="05" class="ck" />05
    <input type="button" value="取多选" id="btn"  />
    
    <script type="text/javascript">
    
        $("#qx").click(function(e) {
            var xz = $(this).prop("checked");
            $(".ck").prop("checked",xz);
        });
    </script>

     4.JQUERY获取下拉列表的选中值

    <title> JQUERY 获取下拉列表的选中值</title>
    <script src="jquery-1.11.2.min.js"></script>
    
    </head>
    <body>
    
    <select id="sel">
        <option value="11111">aaaaa</option>
        <option value="22222">bbbbb</option>
        <option value="33333">ccccc</option>
    </select>
    <input type="button" value="取下拉" id="b1" />
    <script type="text/javascript">
    
        $("#b1").click(function(e) {
           alert ($("#sel").val());
        });
    </script>
  • 相关阅读:
    Java LinkedList 源码剖析
    Java并发编程:线程池的使用
    Java 线程池的原理与实现
    多线程JAVA篇(一)
    软件开发中会用到的图
    linux文件名匹配——通配符使用
    XModem协议
    dmesg 命令七种用法
    定位精度单位CEP、RMS、2DRMS常识
    5G NR 技术简介
  • 原文地址:https://www.cnblogs.com/wells33373/p/6078321.html
Copyright © 2011-2022 走看看