应用jquery对form表单中的文本框和单选按钮进行操作 _Web前端

使用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>