测试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; 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>