JQuery中input textarea select checkbox radio取值示例

发布时间:2020-06-18编辑:脚本学堂
分享一个jquery获取input areatext select checkbox radio中值的小例子,有需要的朋友参考下。

例子,从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>input areatext select checkbox radio中值--www.jb200.com</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; width: 200px;
            height: 150px; display: none">
            正在反馈信息……</div><br />
        <select size="1" style="width: 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>