JQuery对基本Html控件的操作TextBox、Select、Radio、CheckBox .

来源：互联网发布：聚宝盆软件下载编辑：程序博客网时间：2024/05/16 12:41

废话少说，将JQuery对Html控件的基本操作集成到一个Aspx页面，让初学者有个直观的了解。JQuery老鸟可以直接忽略。直接拷贝下来放到本地页面即可直观查看。

[javascript] view plaincopyprint?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlGetAndSet.aspx.cs" Inherits="JQueryExample_ControlGetAndSet" %>
<!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 runat="server">
<title></title>
<mce:script src="../JS/jquery-1.3.2.min.js" mce_src="JS/jquery-1.3.2.min.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
function GetText() {
var text = $("input[name=text1]").val();
alert(text);
//用id获取 text的value值
var tmp = $("#text1").val();
alert(tmp);
}
function SetText() {
var text = $("input[name='text1']");
text.val("用Name获取赋值");
//var tmp = $("#text1").val("用ID获取赋值");
}
//获取Select选中值
function GetSelect() {
var sel = $("select[name='select1']").text();
//var sel = $("select[name='select1'] option[selected]").text();
//通过id获取
//var sel = $("#select1").text();
alert(sel);
}
//设置选中项的值未实现只能设置已有项选中
function SetSelect() {
//$("#select1").val("北京");//将value为“北京”的项选中
$("#select1 ").get(0).selectedIndex = 1
}
//添加Option
function AddSelectOptions() {
//$("<option>北京</option>").appendTo("#select1");
//for(var i=0;i<5;i++)
//{
// $("<option>" + i + "</option>").appendTo("#select1");
//}
//prepend为第一个，append(appendTo)为追加
$("#select1").append("<option>北京</option>");
for(var i=0;i<5;i++)
{
$("#select1").append("<option>" + i + "</option>");
}
}
//移除选中项
function RemoveSelectOptions() {
$("#select1 option[selected]").remove();
}
//清空option
function ClearSelectOptions() {
//$("#select1").empty();
$("#select1").html("");
}
function GetCheck() {
var check = $("#checkbox1").attr("checked");
alert(check);
}
function SetCheck() {
$("#checkbox1").attr("checked", true);
}
function AddCheck() {
$("<input type='checkbox' />").appendTo("#form1");
}
function GetRadio() {
var ra = $("input[type='radio'][checked]").attr("value");
//var ra = $("input[type='radio'][checked]").val();
alert(ra);
}
function SetRadio() {
//$("input[type='radio']").get(0).checked = true;
$("input[type='radio'][value=2]").attr("checked","checked");
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="checkbox1" type="checkbox" value="是否正确" style="width:100px" />
<input id="btnGetCheck" type="button" value="获取Check是否选中" onclick="GetCheck()" />
<input id="btnSetCheck" type="button" value="设置Check选中" onclick="SetCheck()" />
<input id="btnAddCheck" type="button" value="新增Check" onclick="AddCheck()" />
</div>
<div>
<input id="radio1" type="radio" value="1" style="width:50px" />
<input id="radio2" type="radio" value="2" style="width:50px" />
<input id="btnGetRadio" type="button" value="获取Radio是否选中" onclick="GetRadio()" />
<input id="btnSetRadio" type="button" value="设置Radio选中" onclick="SetRadio()" />
</div>
<div>
<select id="select1" name="select1">
<option>上海</option>
</select>
<input id="btnGetSelect" type="button" value="获取选中项值" onclick="GetSelect()" />
<input id="btnSetSelect" type="button" value="设置选中项值" onclick="SetSelect()" />
<input id="Button1" type="button" value="添加Option" onclick="AddSelectOptions()" />
<input id="Button2" type="button" value="移除选中项" onclick="RemoveSelectOptions()" />
<input id="Button3" type="button" value="清空下拉框" onclick="ClearSelectOptions()" />
</div>
<div>
<input id="text1" name="text1" type="text" value="文本框" />
<input id="btnGetText" type="button" value="获取Text值" onclick="GetText()" />
<input id="btnSetText" type="button" value="设置Text值" onclick="SetText()" />
</div>
</form>
</body>
</html>