• 测试JQuery中常用的取值方法 包含(input areatext select checkbox radio )



    <!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>
        <title>无标题页</title>

        <script type="text/javascript" src="../javascript/jquery.js"></script>
        <script type="text/javascript" src="../javascript/jquery_selecter.js"></script><!--未调用-->
        <script type="text/javascript" src="../javascript/jquery_checkbox.js"></script><!--未调用-->

        <script language="javascript" type="text/javascript">
    $(document).ready(function (){
        $('#send_ajax').click(function (){
          var params=$('input').serialize();
          $.ajax({
                url :'ajax_exectue.aspx', 
                type:'post',
                dataType:'html',
                data:params, 
                success:update_page,
                error:update_error
                });
           });
    });
        function update_page (xml) {     
           $("#result").css("display","");
           $("#result").html(xml);
         
        }
    function update_error()
    {
        alert("error!");
    }
    function noShow(){   
       $("#result").css("display","none");
    }
    $(function (){
       $('#test_post').click(function (){
                $.post('ajax_exectue.aspx',
                {username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
                function (data){
               
                $('#result').html(data);
                });
       });
    });

    $(function(){
        $('#test_Sel').click(function(){
            var va = $("#sel").val();
            $("#sel").attr("value","4");
            alert(va);
        });

    });

    $(function(){
       $('#test_Rad').click(function(){
            var v = $("input[name='as'][checked]").val();
            alert(v);
       });

    });

    $(function(){
        $("#checkedAll").click(function(){
            if($(this).attr("checked") == true)
            {
               $("input[name='chk']").each(function(){$(this).attr("checked",true);});
            }
            else
            {
                $("input[name='chk']").each(function(){$(this).attr("checked",false);});
            }
        });
    });

    $(function(){
        $("#test_Chk").click(function(){var f="";
         //var f = $("input[name='chk']").checkbox().val();
         $("input[name='chk']").each(function(){
            if($(this).attr("checked") == true){if(f){f+=",";}f+=$(this).attr("value");}
         });
          alert(f);
        });
    });

    $(function(){
        $("#test").click(function(){
           alert( $("#aera").val());
        });
    });
        </script>

    </head>
    <body>
        <form id="formtest" action="" method="post">
            <span>输入姓名:</span><input type="text" name="username" id="input1" /><br />
            <span>输入年龄:</span><input type="text" name="age" id="input2" /><br />
            <span>输入性别:</span><input type="text" name="sex" id="input3" /><br />
            <span>输入工作:</span><input type="text" name="job" id="input4" />
            <div id="result" style="background: orange; border: 1px solid red; 200px;
                height: 150px; display: none">
                正在反馈信息……</div><br />
            <select size="1" style=" 100px" id="sel" name="sel">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <input type="radio" name="as" value="0" checked />男
            <input type="radio" name="as" value="1" />女
            <br />
            <div class="components-list">
                <input type="checkbox" name="chk" id="checkbox_name_1" value="1" />复选1<br />
                <input type="checkbox" name="chk" id="checkbox_name_2" value="2" />复选2<br />
                <input type="checkbox" name="chk" id="checkbox_name_3" value="3" />复选3<br />
                <input type="checkbox" name="chk" id="checkbox_name_4" value="4" />复选4<br />
                <input type="checkbox" name="checkedAll" id="checkedAll" />全选/取消全选
            </div>
            <div>
                <textarea id="aera" cols="12" rows="3"></textarea>
            </div>
        </form>
        <button id="send_ajax">提交</button>
        <button id="test_post">Post</button>
        <button id="test_Sel">测试Selector</button>
        <button id="test_Rad">测试Radio</button>
        <button id="test_Chk">测试CheckBox</button>
        <button id="test">测试areatext</button>
    </body>
    </html>

  • 相关阅读:
    [LintCode] Merge Two Sorted Lists 混合插入有序链表
    Convert PLY to VTK Using PCL 1.6.0 or PCL 1.8.0 使用PCL库将PLY格式转为VTK格式
    [LintCode] Best Time to Buy and Sell Stock II 买股票的最佳时间之二
    [LintCode] Maximum Subarray 最大子数组
    [LeetCode] Matchsticks to Square 火柴棍组成正方形
    [LeetCode] Sort Characters By Frequency 根据字符出现频率排序
    [LeetCode] 450. Delete Node in a BST 删除二叉搜索树中的节点
    [LeetCode] Serialize and Deserialize BST 二叉搜索树的序列化和去序列化
    [LeetCode] Find All Numbers Disappeared in an Array 找出数组中所有消失的数字
    [LeetCode] Add Two Numbers II 两个数字相加之二
  • 原文地址:https://www.cnblogs.com/snlfq2000/p/1393960.html
Copyright © 2020-2023  润新知