• Jquery获取CheckBox、Select、radio的值


    Jquery获取这三个控件的值不可以仅仅根据$("#控件ID")进行获取,以下是自己进行的简单的测试:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Control.aspx.cs" Inherits="Test.Control" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //获取CheckBox值
                $("#btnClick1").click(function () {
                    var obj = document.getElementsByName('checkbox'); //选择所有name="checkbox"的对象,返回数组      
                    var s = '';
                    for (var i = 0; i < obj.length; i++) {
                        if (obj[i].checked) {//取到对象数组后,我们来循环检测它是不是被选中  
                            s += obj[i].value + ','; //如果选中,将value添加到变量s中   
                        }
                    }
                    alert(s == '' ? '你还没有选择任何内容!' : s);
                });
                $("#btnClick2").click(function () {
                    var chkValue = []; //定义一个数组
                    $("[name= 'checkbox']:checked").each(function () {////遍历每一个名字为interest的复选框,其中选中的执行函数      
                        chkValue.push($(this).val()); //将选中的值添加到数组中去
                    });
                    alert(chkValue.length == 0 ? '你还没有选择任何内容!' : chkValue);
                });
                //一组Checkbox使用jQuery判断是否有选中项
                $("#btnIsHasValue").click(function () {
                    var chkValue = [];
                    $("[name= 'checkbox']:checked").each(function () {
                        chkValue.push($(this).val());
                    });
                    if (chkValue.length == 0) {
                        alert("没有选中项");
                    }
                    if (chkValue.length > 0) {
                        alert("有选中项,对应的值是:" + chkValue);
                    }
                });
    
                //获取Select选择的Value
                $("#selectColor").change(function () {
                    var checkValue = $("#selectColor option:selected").text();
                    alert("你选择了:" + checkValue);
                });
    
                //获取radio的值
                $("#btnClick3").click(function () {
                    var value = $("[name='rd']:checked").val();
                    alert(value);
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label runat="server" Text="多选框"></asp:Label>
            <input type="checkbox" name="checkbox" value="chb1" checked="checked" />
            <input type="checkbox" name="checkbox" value="chb2" />
            <input type="checkbox" name="checkbox" value="chb3" />
            <br />
            <asp:Label ID="Label1" runat="server" Text="单&nbsp;选"></asp:Label>
            <input type="radio" name="rd" value="rd1" id="rd1" checked="checked" />
            <input type="radio" name="rd" value="rd2" id="rd2" />
            <input type="radio" name="rd" value="rd3" id="rd3" />
            <br />
            <asp:Label ID="Label2" runat="server" Text="下拉框"></asp:Label>
            <select name="select" id="selectColor">
                <option value="">==请选择==</option>
                <option value="1">红色</option>
                <option value="2">黄色</option>
                <option value="3">蓝色</option>
            </select>
            <br />
            <asp:Button runat="server" Text="js获取复选框值1" ID="btnClick1" />
            <asp:Button runat="server" Text="js获取复选框值2" ID="btnClick2" />
            <asp:Button runat="server" Text="是否有选中项" ID="btnIsHasValue" />
            <asp:Button runat="server" Text="js获取单选值" ID="btnClick3" />
        </div>
        </form>
    </body>
    </html>
  • 相关阅读:
    C++ Primer学习笔记(三) C++中函数是一种类型!!!
    C++类的成员函数的形参列表后面的const
    C++ const总结
    简单的使用Gson (序列化 和 反序化)
    HTML 获取class里的多个值 和 dataset的使用
    SiteMesh的简单使用
    IDEA 使用LiveEdit插件
    Java 转发和重定向的区别
    Web.xml 定制URL
    java 枚举类(简单使用)
  • 原文地址:https://www.cnblogs.com/chenls/p/4301188.html
Copyright © 2020-2023  润新知