利用JQuery操作form表单,例如:text,radis,checkbox,file等等之类的

今天给大家总结一下form表单中一些常用的操作,例如:获取值,隐藏控件,设置控件不可修改,设置值等等之类的。

下面看具体的例子:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form表单基本操作</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <form action="#" method="post">
        <div style="margin: 10px;">
            姓名:<input type="text" name="name" id="name" placeholder="名称"/>
        </div>
        <div style="margin: 10px;">
            年龄:<input type="text" name="age" id="age" placeholder="年龄"/>
        </div>
        <div style="margin: 10px;">
            <button type="button" id="buttonInitial">给input赋初始值</button>
            <button type="button" id="buttonEmpty">清空input</button>
            <button type="button" id="buttonNoAvailable">设置input不可用</button>
            <button type="button" id="buttonaVailable">设置input可用</button>
            <button type="button" id="buttonHide">设置input隐藏</button>
            <button type="button" id="buttonShow">设置input显示</button>
        </div>

        <div style="margin: 10px;">
            性别:<input type="radio" name="sex" id="gril" value="0"/>
            <input type="radio" name="sex" id="boy" value="1"/>
        </div>

        <div style="margin: 10px;">
            <button type="button" id="radioInitial">设置radio的初始值</button>
            <button type="button" id="radioGet">获取radio的选中值</button>
            <button type="button" id="radioList">遍历radio中所有值</button>
            <button type="button" id="radioValue">获取radio中某一个值</button>
        </div>

        <div style="margin: 10px;">
            <label>水果:</label>
            <label><input name="Fruit" type="checkbox" value="苹果" />苹果 </label>
            <label><input name="Fruit" type="checkbox" value="桃子" />桃子 </label>
            <label><input name="Fruit" type="checkbox" value="香蕉" />香蕉 </label>
            <label><input name="Fruit" type="checkbox" value="梨" />梨 </label>
        </div>

        <div style="margin: 10px;">
            <button type="button" id="checkboxInitial">设置checkbox的初始值</button>
            <button type="button" id="checkboxAll">设置checkbox的全选</button>
            <button type="button" id="checkboxNoAll">设置checkbox的全不选</button>
            <button type="button" id="checkboxGet">获取checkbox的选中值</button>
            <button type="button" id="checkboxList">遍历checkbox中所有值</button>
            <button type="button" id="checkboxValue">获取checkbox中某一个值</button>
            <button type="button" id="checkboxEven">设置checkbox选中所有奇数</button>
            <button style="margin-top: 10px;" type="button" id="checkboxOver">设置checkbox反选</button>
        </div>

        <div style="margin: 10px;">
            <select id="selectId" name="selectName" style="width: 80px;">
                <option value ="0">请选择</option>
                <option value ="1">第一层</option>
                <option value ="2">第二层</option>
                <option value="3">第三层</option>
                <option value="4">第四层</option>
            </select>
        </div>


        <div style="margin: 10px;">
            <button type="button" id="selectInitial">设置select的默认值</button>
            <button type="button" id="selectGet">获取select的选中值</button>
            <button type="button" id="selectList">遍历select所有值</button>
            <button type="button" id="selectValue">获取select中某一个值</button>
        </div>
    </form>
</body>

<script type="text/javascript">
    $(function () {

    });

    //给input赋初始值
    $("#buttonInitial").on("click", function () {
        $("#name").val("张三");
        $("#age").val("40");
    });

    //清空input
    $("#buttonEmpty").on("click", function () {
        $("#name").val("");
        $("#age").val("");
    });

    //设置input不可用
    $("#buttonNoAvailable").on("click", function () {
        $("#name").attr("disabled","true");
        $("#age").attr("disabled","true");
    });

    //设置input可用
    $("#buttonaVailable").on("click", function () {
        $('#name').removeAttr("disabled");
        $('#age').removeAttr("disabled");
    });


    //设置input隐藏
    $("#buttonHide").on("click", function () {
        $("#name").hide();
        $("#age").hide();
    });

    //设置input显示
    $("#buttonShow").on("click", function () {
        $('#name').show();
        $('#age').show();
    });

    //设置radio的初始值
    $("#radioInitial").on("click", function () {
        $("input[type='radio'][name=sex][value='0']").attr("checked",true);
    });

    //获取radio的选中值
    $("#radioGet").on("click", function () {
        var v1=$('input[name="sex"]:checked').val();
        var v2=$('input:radio:checked').val();
        var v3=$('input[name="sex"]').filter(':checked').val();
        alert("v1:"+v1+"  v2:"+v2+"  v3:"+v3);
    });

    //遍历radio中所有值
    $("#radioList").on("click", function () {
        $('input[name="sex"]').each(function(){
            alert(this.value);
        });
    });

    //获取radio中某一个值
    $("#radioValue").on("click", function () {
        var v1=$('input[name="sex"]:eq(0)').val();
        var v2=$('input[name="sex"]:eq(1)').val();
        alert("v1:"+v1+"  v2:"+v2);
    });

    //设置checkbox的初始值
    $("#checkboxInitial").on("click", function () {
        var v1=$('input[name="sex"]:eq(0)').val();
        var v2=$('input[name="sex"]:eq(1)').val();
        alert("v1:"+v1+"  v2:"+v2);
    });


    //设置checkbox的全选
    $("#checkboxAll").on("click", function () {
        $("[name='Fruit']").attr("checked",'true');//全选
    });


    //设置checkbox的全不选
    $("#checkboxNoAll").on("click", function () {
        $("[name='Fruit']").removeAttr("checked");//取消全选
    });


    //获取checkbox的选中值
    $("#checkboxGet").on("click", function () {
        $("[name='Fruit']").each(function(){//反选
            if($(this).attr("checked")){
                alert($(this).val());
            }
        })
    });


    //遍历checkbox中所有值
    $("#checkboxList").on("click", function () {
        $("[name='Fruit']").each(function(){
           alert($(this).val());
        })
    });

    //获取checkbox中某一个值
    $("#checkboxValue").on("click", function () {
        var i=1;
        $("[name='Fruit']").each(function(){//反选
            if(i==2){
                alert("two is value:"+$(this).val());
            }
            i++;
        })
    });

    //设置checkbox选中所有奇数
    $("#checkboxEven").on("click", function () {
        $("[name='Fruit']:even").attr("checked",'true');//选中所有奇数
    });

    //设置checkbox反选
    $("#checkboxOver").on("click", function () {
        $("[name='Fruit']").each(function(){//反选
            if($(this).attr("checked")){
                $(this).removeAttr("checked");
            }
            else{
                $(this).attr("checked",'true');
            }
        })
    });

    //设置select的默认值
    $("#selectInitial").on("click", function () {
        $("#selectId option[value='1']").attr("selected", "selected");
    });

    //获取select的选中值
    $("#selectGet").on("click", function () {
        var checkText=$("#selectId").find("option:selected").text(); //获取Select选择的text
        var checkValue=$("#selectId").val(); //获取Select选择的Value
        var checkIndex=$("#selectId ").get(0).selectedIndex; //获取Select选择的索引值
        alert("选中value值为:"+checkValue);
        alert("选中text值为:"+checkText);
        alert("选中value值的索引为:"+checkIndex);
    });

    //遍历select所有值
    $("#selectList").on("click", function () {
        $("select[name=selectName] option").each(function() {
            alert($(this).val());
        });
    });

    //获取select中某一个值
    $("#selectValue").on("click", function () {
        var value=$("#selectId option:eq(1)").val();
        alert("某个值:"+value);
    });
</script>
</html>

运行界面:

如果大家想要源代码或者对文章有啥异议都可以加我QQ:208017534  欢迎打扰哦!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

php开发文章发布示例(正则表达式实例开发)

存档: post.php 1 <form method="post" action="viewthread.php" target="_blank"> 2 ...

2635
来自专栏微服务

小程序前端开发基础框架,可直接用于开发

项目介绍 对于微信小程序开发,一直想开源一个可以直接拿来使用的开源框架,这样可以方便大家在此基础上可以迭代开发,简化了写样式,发起Http请求以及和简化调用微信...

3148
来自专栏青枫的专栏

day27_Struts2学习笔记_04

   需要熟悉 ActionContext类 和 ValueStack接口 的 API 。框架为我们存数据。 1.1、利用 ActionContext 存数据...

392
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:TapGestureRecognizer 的简单介绍与应用

3357
来自专栏CNN

AndroidStudio插件开发(进阶篇之Action机制)

转载请注明出处:【huachao1001的专栏:http://blog.csdn.net/huachao1001/article/details/5388350...

662
来自专栏zhisheng

Elasticsearch自定义分词器

下载地址:https://github.com/medcl/elasticsearch-analysis-mmseg/releases 根据对应的版本进行下载

1093
来自专栏hightopo

基于 HTML5 Canvas 的 3D 模型贴图问题

642
来自专栏龙渊阁测试精英

Jmeter(三十一)_dummy sampler模拟数据驱动

之前写过一篇数据驱动的文章 数据驱动测试 ,但是内容过于简单,有些关键的地方没有写明白。这两天参照了一下官方文档,重新整理了一篇数据驱动测试!

743
来自专栏青枫的专栏

day25_Struts2学习笔记_01

  把重复性的繁琐的代码封装起来。使程序员在编码中把更多的精力放业务需求的分析和理解上面。 特点:封装了很多细节,程序员在使用的时候会非常简单。

391
来自专栏微信公众号:Java团长

Java类加载器详解(下)

这个类中定义了一个加密和解密的算法,很简单的,就是将字节和oxff异或一下即可,而且这个算法是加密和解密的都可以用,很是神奇呀!

1263

扫码关注云+社区