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-10-24 03:23:08

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

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

表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQuery和JavaScript中怎么操作表单元素的值? JQuery操作表单总结: 1.文本框.密码框.隐藏域.文本域(id换成对应的,value属性存在,才能利用attr('value') 获取值,否则返回undefined): 1.1 获取->$("#text").val()或者$("#text").attr('value') 1

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

取下拉菜单选中项的文本: 获取和设置下拉菜单的值: 清空下拉菜单: 给下列菜单添加元素: 取单选框值: 单选或复选按钮的选择: 取复选框值: 判断单选或复选框是否被选中: 元素可用不可用: 判断元素可用不可用. 实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr(&

实用jquery操作表单元素代码

实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){      $("#save").click(function(){         $("#save").attr("disabled",true);//设为不可用                                 $("#form1")[0].su

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

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

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

 将自己的表单元素ID和name命名为了nodeName,在chrome浏览器下报错,结果发现是表单元素命名的原因 在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName:  代码如下: <form>    <input type="text" name="nodeName" id="nodeName">    ...........    </form>    在chrome浏览器下可

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

在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName: 复制代码 代码如下: <form> <input type="text" name="nodeName" id="nodeName"> ........... </form> 在chrome浏览器下可以看到这么个错误: Uncaught TypeError: Object #<HTMLInputElement> has

JQuery遍历指定表单的值示例

 代码如下 复制代码 <html>     <head>         <title>chat</title>         <meta http-equiv="pragma" content="no-cache">         <meta http-equiv="cache-control" content="no-cache">        

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

代码如下  代码如下 复制代码 <script language="javascript" src="js/jquery-1.7.2.min.js"></script> <script language="javascript"> $(document).ready(function(){   $("[id=test]").each(function(){   $(this).click(f

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

1. 操作属性 上文介绍了如何筛选到需要的元素.得到了元素之后就要对其进行操作.一个常见的需求是遍历得到的元素集,对每一个元素进行一个操作.jQuery提供的函数是 each(iterator),其中iterator是一个函数,接受一个整数作为参数,表示第几个元素.看一个简单的例子. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Operatio