`
三月沙
  • 浏览: 619962 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用jquery对form表单中的文本框和单选按钮进行操作

阅读更多

版本为jquery 1.4.4

 

页面代码

 

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.4.4.js" >
    </head>
    <body>
        <div style="margin: 100px;">
            <form name="myForm" method="post" action="">
                <div>
                    我是一个文本框<input type="text" name="我是一个文本输入框" value=""/><br>
                    <input type="radio" name="我们是一组单选按钮"  value="one_radio" />我是第一个按钮<br>
                    <input type="radio" name="我们是一组单选按钮"  value="two_radio" />我是第二个按钮<br>
                    <input type="radio" name="我们是一组单选按钮" checked="checked" value="three_radio"  />我是第三个按钮默认已经选取
                </div> 
            </form>
        </div><br>
        <div id="text" >
            <button>文本框的值以及属性name的值</button>
            <button>改变文本框的值</button>
            <button>去掉文本框</button>
            <button>添加一个文本框</button>
            <button>改变文本框的name属性为:我是被改变后的name</button>
            <button>去掉文本框的name属性</button>
            <button>文本框的name属性是由回调函数生成的</button>
        </div>
        <br>
        <div id="radio" >
            <button>单选框的值以及属性name的值</button>
            <button>改变单选框的name值和value值</button>
            <button>已经选中的单选框的值</button>
            <button>未选中的单选框的值</button>
            <button>未选中的单选框的值,使用not函数</button>
            <button>添加一个单选框到该组单选框</button>
            <button>去掉选中的单选框</button>
        </div>
    </body>
</html>

 

javascript代码

 

</script>
        <script type="text/javascript">
            $(document).ready(function(){
                
                $("#single").change(function(){
                    alert("单选下拉列表中一项已经发生变化"+"其值为"+$(this).val());
                });

                //val函数取得文本框的值,attr函数取得相应的属性
                $($("#text").find("button").get(0)).click(function(){
                    alert("我的值是:"+$("form[name=myForm] input[type=text]").val());
                    alert("我的名字是:"+$("form[name=myForm] input[type=text]").attr("name"));
                });

                //val带参数是设置文本框值
                $($("#text").find("button").get(1)).click(function(){
                    var num = Math.random()*10;
                    $("form[name=myForm] input[type=text]").val("我的值被改变"+num);
                });

                //remove直接从页面中除去该文本框
                $($("#text").find("button").get(2)).click(function(){
                    $("form[name=myForm] input[type=text]").remove();
                });

               //插入一个项到指定的位置,before的参数是插入的内容
                $($("#text").find("button").get(3)).click(function(){
                    $($($("form[name=myForm]").find("div")[0]).find("input[type=radio]")[0]).before("<input type='text' name='我是一个文本框' value='' /><br>");
                });

                //atrr(key,value),设置相应的属性值
                $($("#text").find("button").get(4)).click(function(){
                    $("form[name=myForm] input[type=text]").attr("name", "我是被改变后的name");
                });

               //移除相应的属性
                $($("#text").find("button").get(5)).click(function(){
                    $("form[name=myForm] input[type=text]").removeAttr("name");
                });

               //对属性调用相应的回调函数进行设置
                $($("#text").find("button").get(6)).click(function(){
                    $("form[name=myForm] input[type=text]").attr("name", function(){
                        return Math.random()*10;
                    });
                });


               //选取radio的值
                $($("#radio").find("button").get(0)).click(function(){
                    alert("第一个单选框的值是:"+$("form[name=myForm] input[type=radio]").first().val());
                    alert("第一个单选框的名字是:"+$("form[name=myForm] input[type=radio]").first().attr("name"));
                });


                $($("#radio").find("button").get(1)).click(function(){
                    $("form[name=myForm] input[type=radio]").first().val("第一个单选框的value值被改变");
                    $("form[name=myForm] input[type=radio]").first().attr("name","第一个单选的name值被改变");
                });

                //被选中的radio的值
                $($("#radio").find("button").get(2)).click(function(){
                    alert("我被选中了:"+$("form[name=myForm] input[type=radio]:checked").val());
                });

                //未选中的radio
                $($("#radio").find("button").get(3)).click(function(){
                    $("form[name=myForm] input[type=radio]:not(:checked)").each(function(){
                        alert($(this).val());
                    });
                });

               //调用not函数过滤出未选中的
                $($("#radio").find("button").get(4)).click(function(){
                    $("form[name=myForm] input[type=radio]").not(":checked").each(function(){
                        alert($(this).val());
                    });
                });

                //insertBefore 插入指定得位置其参数为element对象
                $($("#radio").find("button").get(5)).click(function(){
                    var name = $("form[name=myForm] input[type=radio]").first().attr("name");
                    $("<input type='radio' name='"+name+"' value='new_radio "+Math.random()+"' />我是新的<br>").insertBefore($("input:radio").last());
                });

                //移除选中元素
                $($("#radio").find("button").get(6)).click(function(){
                    $("form[name=myForm] input[type=radio]").remove(":checked");
                });
            });
           
        </script>
 
0
0
分享到:
评论

相关推荐

    jquery获取form表单input元素值的简单实例

    在本篇内容中,我们将详细探讨如何使用jQuery来获取form表单中input元素的值,包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input...

    jquery获取表单值

    本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、单选按钮、复选框、下拉列表)的值。 #### 一、获取表单控件的值 ##### 1. 获取文本框(`&lt;input type="text"&gt;`)的值 文本框是最常见...

    jquery form 表单验证神器

    在HTML表单中,我们可以定义各种输入字段,如文本框、密码框、复选框、单选按钮等,然后通过jQuery Form 验证插件对这些输入进行验证。 插件的核心部分是`jquery.xu72.form.4.0.js`,这是实际的JavaScript代码文件...

    jQuery Form 表单提交插件的各类api应用.pdf

    总结来说,jQuery Form插件的这些API为开发者提供了强大的表单操作能力,使得在处理表单数据时能够更加精细和高效。通过熟练掌握这些API,可以提升表单交互体验,简化前端开发工作。在实际项目中,可以根据具体需求...

    jQuery改变form表单的action,并进行提交的实现代码

    代码中使用了JSP标签(&lt;s:form&gt;)来定义表单,这通常出现在使用Struts2框架的项目中,不过这里的重点是jQuery的实现。首先定义了一个名为exportScore的函数,这个函数用于在客户端触发表单的提交,但是提交的地址被...

    类似淘宝的尺寸选择器表单按钮

    在HTML中,`&lt;form&gt;`标签用于定义一个表单,它可以包含各种输入元素,如文本框、复选框、单选按钮等。在这个场景下,我们将使用`&lt;input type="radio"&gt;`来创建单选按钮,用于让用户在多个尺寸选项中选择一个。 ```...

    jQuery问卷调查表单在线编辑代码

    在`index.html`文件中,我们首先构建问卷调查表单的基础HTML结构,包括各种输入元素(文本框、复选框、单选按钮、下拉菜单等)以及编辑按钮。这些元素的ID和类名将被jQuery用来进行后续操作。 ```html &lt;form id=...

    JQUERY获取form表单值的代码

    在jQuery中,获取和操作HTML表单(form)的值是一项常见的任务,这对于处理用户输入和数据交互至关重要。本文将详细介绍如何使用jQuery获取不同类型的表单元素(如text、textarea、radio、checkbox以及select)的值...

    jQuery表单个人信息格式验证代码.zip

    在这个例子中,index.html可能包含了用于个人信息输入的表单元素,如文本框(textbox)、下拉菜单(select)、复选框(checkbox)和单选按钮(radio)等。这些元素的ID和类名(class)会被jQuery代码用来选择和操作,实现验证...

    带头像、邮箱提醒、ajax验证的form表单

    在这个特定的场景中,表单被设计成包含用户头像、邮箱提醒功能以及使用Ajax进行数据验证。以下是关于这些知识点的详细解释: 1. **用户头像**: 用户头像是个人化UI设计的重要组成部分,它通常用于表示账户或用户...

    6个非常精美的Web前端表单提交以及搜索框(一)

    在这个案例中,我们看到的六个表单设计可能包括各种输入元素,如文本框、下拉菜单、复选框、单选按钮等,以及相应的提交和清除按钮。这些元素的合理布局和样式设计对于提升用户体验至关重要。 "Web框架"在这里可能...

    Jquery easyUI api 下载

    3. **表单(Form)**:Form 用于收集用户输入,支持多种输入类型,如文本框、复选框、单选按钮等。EasyUI 提供了验证和提交表单的 API。 4. **菜单(Menu)**:Menu 可以创建多级下拉菜单,常用于网站导航或操作...

    jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

    它会遍历表单中的所有元素,包括文本框、复选框、单选按钮等,并将它们的值以键值对的形式拼接成URL格式,例如`key1=value1&key2=value2`。 2. **clearForm()**: clearForm()函数用于清除表单中所有输入控件的值...

    jQuery表单美化插件jqTransform使用详解

    jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框、文本框、单选、复选框、按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input ...

    WordPress联系表单插件Contact Form 7

    Contact Form 7一款简单的Wordpress联系表单插件,不但简单但灵活性高,可以生成多个联系表单,支持通过标记自定义邮件或表单内容的显示,Ajax提交和 jQuery表单插件支持.可结合Akismet过滤垃圾邮件,同时也支持...

    表单设计器

    1. **可视化编辑**:formBuilder的核心功能是其可视化界面,允许用户通过简单的拖放操作添加、删除和排列表单元素,如文本框、复选框、单选按钮、下拉菜单等。 2. **自定义模板**:开发者可以根据需求创建自己的...

    jquery easyui demo

    5. **表单(Form)**:EasyUI 提供了丰富的表单控件,如文本框、下拉框、复选框和单选按钮。`.form()`方法用于处理表单提交和验证,使得数据管理和验证更加简便。 6. **布局(Layout)**:EasyUI 的布局组件可以帮助你...

    jquery动态增加表格表单行来插入数据-------遇到的兼容问题和radio问题

    本文将深入探讨“jquery动态增加表格表单行来插入数据”这一主题,以及在这个过程中可能遇到的兼容性和radio(单选按钮)问题。 首先,动态增加表格表单行是常见的前端交互功能,常用于数据录入或编辑场景。使用...

    jquery easyui

    EasyUI提供了诸如文本框(Textbox)、复选框(Checkbox)、单选按钮(Radio)、日期选择器(Datebox)等多种表单控件,通过简单的API调用和配置,可以轻松实现各种复杂的表单布局和验证规则。 "form5_getdata.php" ...

Global site tag (gtag.js) - Google Analytics