生活随笔
收集整理的這篇文章主要介紹了
jQuery获取及设置单选框,多选框,文本框内容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在工作中,text,radio,checkbox,select在開發過程中是必不可少的一部分.在開發過程中經常要處理頁面表單元素.
Eg:
?? 在復選框checkBox中獲取checked的value值,來觸發和調用其它頁面表單元素,制作互動性更強更友好的用戶體驗.
jQuery通過元素$(#id)產生一個object對象,通過對獲取的對象輸入了解,獲取任何元素中的任何信息.
為了以后工作方便,我總結了相關jQuery操作object對象的方法,獲取下拉框selected,復選框checkBox,文本框text,radio value值
其操作過程:
?? 1.jQuery獲取object對象,(select對象,checkbox對象,text對象)
?? 2.獲取對象值,對于值唯一的元素,如:select,text通過get()方法獲取value值.(get(0)如同數組下標,默認值是從0開始),對于數據元素,如checkbox通過each循環獲取value值
?? 3.獲取表單元素值主要是jQuery中get()對象訪問方法,其次是each()方法,$(#id)產生的是一個對象,獲取其中的hi完全可以使用jQuery對象訪問方法.
??? (1).each()循環,相當于foreach;
??? (2).size()統計個數
??? (3).length()統計個數
??? (4).get()單個或多個
??? (5).index()索引
Error: uncaught exception: Syntax error, unrecognized expression: [@type='radio']
在jQuery低版本中使用該方法會報錯,“name”屬性前不用加“@”符號，后來版本都不用加@。
Eg:?
?? $("input[name=radioId]:radio").attr("checked",'r2');//設置value=r2的項目為當前選中項
?? $("input[@type=radio][value=r2]").attr("checked",'checked');? //設置value=r2的項目為當前選中項
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>jQuery教程基礎篇之強大的選擇器-過濾選擇器-表單對象屬性過濾選擇器
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><\/script>');</script>
<script type="text/javascript">$(document).ready(function(){//對表單內 可用input 賦值操作.
$('#btn1').click(function(){alert(document.getElementById("add").value);$("#form1 input:enabled").val("這里變化了！");return false;})//對表單內 不可用input 賦值操作.
$('#btn2').click(function(){//獲得當前text文本框的value值//$("#email").get(0).value;
alert($("#email").attr("value"));$("#form1 input:disabled").val("這里變化了！");return false;})//使用:checked選擇器，來操作多選框.
$(":checkbox").click(countChecked);function countChecked() {//多選框checkbox
$("#chk2").attr("checked",true); //checkbox選中var n = $("input:checked").length;$("div").eq(0).html("[b]有"+n+" 個被選中![/b]");}countChecked();//進入頁面就調用.//使用:selected選擇器，來操作下拉列表.
$("select").change(function () {var str = "";//后迭代器 =====>選取select里面的元素
$("select :selected").each(function () {str += $(this).text() + ",";});alert(str);//獲得selected值var sele = $("#selectId option:selected").get(0).value;alert(sele);$("div").eq(1).html("[b]你選中的是："+str+"[/b]");}).trigger('change');//獲得radio對象
$("#rButtonId").click(function(){var radioObj = $("[name='radioId']:checked");//獲取當前checked的value值var radio = radioObj.get(0).value;//var radioObj = $("[name='radioId']:checked").get(0).value;
$("#rResult").html("結果:"+radio);});//Jquery1.4.2之后的版本,"name","value"前不用加"@"符號.//error:uncaught exception: Syntax error, unrecognized expression: [@type='radio']
$("input[name=radioId]:radio").attr("checked",'r2');//設置value=r2的項目為當前選中項//$("input[@type=radio][value=r2]").attr("checked",'checked'); //設置value=r2的項目為當前選中項
});
</script>
</head>
<body>
<h3> 表單對象屬性過濾選擇器.
</h3><form id="form1" action="#"><button type="reset">重置所有表單元素
</button><button id="btn1">對表單內 可用input 賦值操作.
</button><button id="btn2">對表單內 不可用input 賦值操作.
</button>可用元素：<input type="text" name="add" id="add" value="可用文本框"/> <br/>不可用元素：<input type="text" name="email" id="email" disabled="disabled" value="不可用文本框"/><br/><br/><!-- 獲取checkbox的checked值 -->多選框：<br/><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" id="chk2"/>test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<div></div><br/><br/><!-- 獲取select的selected值 -->下拉列表2：<br/><select id="selectId" ><option>浙江
</option><option>湖南
</option><option selected="selected" >北京
</option><option>天津
</option><option>廣州
</option><option>湖北
</option></select><br/><br/><div></div><input type="radio" name="radioId" value="r1" />r1<input type="radio" name="radioId" value="r2" />r2<input type="radio" name="radioId" value="r3" />r3<input type="button" id="rButtonId" value="獲取radio值" /><span id="rResult"></span></form>
</body>
</html> ?
?
?
轉載于:https://www.cnblogs.com/shudonghe/archive/2013/01/24/2874238.html
總結
以上是生活随笔為你收集整理的jQuery获取及设置单选框,多选框,文本框内容的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
