- <%@ 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是否选中" οnclick="GetCheck()" />
- <input id="btnSetCheck" type="button" value="设置Check选中" οnclick="SetCheck()" />
- <input id="btnAddCheck" type="button" value="新增Check" οnclick="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是否选中" οnclick="GetRadio()" />
- <input id="btnSetRadio" type="button" value="设置Radio选中" οnclick="SetRadio()" />
- </div>
- <div>
- <select id="select1" name="select1">
- <option>上海</option>
- </select>
- <input id="btnGetSelect" type="button" value="获取选中项值" οnclick="GetSelect()" />
- <input id="btnSetSelect" type="button" value="设置选中项值" οnclick="SetSelect()" />
- <input id="Button1" type="button" value="添加Option" οnclick="AddSelectOptions()" />
- <input id="Button2" type="button" value="移除选中项" οnclick="RemoveSelectOptions()" />
- <input id="Button3" type="button" value="清空下拉框" οnclick="ClearSelectOptions()" />
- </div>
- <div>
- <input id="text1" name="text1" type="text" value="文本框" />
- <input id="btnGetText" type="button" value="获取Text值" οnclick="GetText()" />
- <input id="btnSetText" type="button" value="设置Text值" οnclick="SetText()" />
- </div>
- </form>
- </body>
- </html>
JQuery对基本Html控件的操作TextBox、Select、Radio、CheckBox .
最新推荐文章于 2021-06-04 12:01:53 发布