jQuery遍历和操作表单元素Select,checkbox,radio

jQuery获取Select选择的Text和Value:
语法解释：

代码如下

复制代码

    1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
    2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
    3. var checkValue=$("#select_id").val(); //获取Select选择的Value
    4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
    5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的 Text和Value:

语法解释：

代码如下	复制代码
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项：

语法解释：

代码如下

复制代码

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
    2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
    3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
    4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
    5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
    5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关

代码如下	复制代码
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[@name=items]').get(1).checked = true;

获取值：

代码如下	复制代码
文本框，文本区域：$("#txt").attr("value")；多选框 checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val(); 下拉框select： $('#sel').val();

示例1

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>首页</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/validator_for_jQuery.js"></script>
<script type="text/javascript">
    function worning(msg){
        return alert("调用了自定义的提示方法worning:"+msg);
    }
    var myWorn = {
            no:function(msg,dom){
                alert("调用了自定义的提示方法myWorn:"+msg);
            },
            yes:function(){

}
};

</script>
</head>
<body style="text-align: left;padding-left: 200px;">
    <div>
    下载:<a href="js/validator_for_jQuery.js">validator_for_jQuery.js</a>
        <form id='myForm' modelFormXML="model.htm" method="get">
            用户名：<input class='needValid' modelID="name" name='username'><br>
            <span class="note">//textType="Chinese required" limit="5-10" worn='必须中文' onblur="valid(jQuery(this));" 外部导入验证需要服务器支持</span><br><br>
            密码：<input textType="required" class='needValid' type="password" onblur="valid(jQuery(this));" limit="6-20" name="pswd" trim="no"><br>
            网站：<input textType="url" name="url" limit="5-100" class='needValid' onblur="valid(jQuery(this));" worn='myWorn:url有误!'> <br>
            住宅电话:<input class='needValid' modelID="homePhone" name="homePhone"><br>
            Email：<input textType="email" title="邮箱地址" name="email" onblur="valid(jQuery(this));" limit="5-10" worn='worning:'><br>
            年龄：<input textType="Chinese " name="age" onblur="valid(jQuery(this));" limit="2|4|10" worn='regExpMap:年龄不合适啊！'><br>
            生日：<input modelID="birthday" class='needValid' name="birth" onblur="valid(jQuery(this));" dateFormat="yyyy年mm月dd日" worn="alert:格式：yyyy年mm月dd日"><br>
            性别：<span textType="radio required" class='needValid' onclick="valid(jQuery(this));" range="!男|女" rangeWorn='性别不能是"男|女"'><input name="sex" type="radio" value="男">男<input name="sex" type="radio" value="女">女</span><br>
            爱好: <span id="checkbox" trim="no" textType="checkbox" class='needValid' name="hobby" limit="!1" limitWarn="" ><input type="checkbox" value="篮球">篮球<input type="checkbox" value="唱歌">唱歌<input type="checkbox" value="扭秧歌">扭秧歌</span><br>
            身份证：<input modelID="idCardNo" class='needValid' textType="idCard" name="idCard" onblur="valid(jQuery(this));" worn='alert:身份证号码不对！'><br>
            金额：<input textType="required number" name="amount" class='needValid' onkeyup="valid(jQuery(this));" regExp="^([1-9][0-9]{0,4}|0)[.]?[0-9]{0,2}$" worn='单位万元，请在英文状态下填写0-999999.99之间的两位小数"'><br>
            percent：<input textType="required" name="percent" onkeyup="valid(jQuery(this));" regExp="^([-]?[0-9]{0,11}?)([.][0-9]{1,2})?$" range="-100" worn='单位%，请在英文状态下填写-99.99到99.99之间的两位小数"'><br>
            <button onclick="return ssh(jQuery('#myForm'),'.needValid');">验证</button>
        </form>
    </div>
</body>
</html>

示例2

代码如下

复制代码

<form>

<input modelID="username" textType="Chinese required" title="用户名" limit="5-10" worn='alert:必须中文' limitWorn="长度不能小于5或者超过10">
    <script type="text/javascript">
    function shh(dom,selector){
        if(formValid(dom,selector)){
            alert("ok");
            return true;
        }else{
            alert("no");
            return false;
        }
    }
    </script>
</form>

时间： 2024-12-23 18:59:03

jQuery遍历和操作表单元素Select,checkbox,radio

jQuery遍历和操作表单元素Select,checkbox,radio的相关文章

jQuery操作表单元素各种方法总结

实用jquery操作表单元素的简单代码_jquery

实用jquery操作表单元素代码

jQuery实现form表单元素序列化为json对象的方法_jquery

使用jQuery时Form表单元素ID和name命名大忌

使用jQuery时Form表单元素ID和name命名大忌_jquery

JQuery遍历指定表单的值示例

jquery遍历页面同ID元素的例子

jQuery第三课修改元素属性及内容的代码_jquery