一、多種input值的方法
1 if($("input[name=item][value='val']").attr('checked')==true) //判斷是否已經打勾
name即控件name屬性,value即控件value屬性
可以不指定屬性值，因一組checkbox的value值都會保存其在數據庫中對應的id，最好寫成如下方式
if($("input[name=row_checkbox]").attr('checked')==true)
{
alert("j");
}
else
{
alert("請選擇數據！");
}
另，還可以寫成if($("[name=row_checkbox]").attr('checked')==true)
jquery radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關
文章分類:Web前端
jQuery 1.3.2版本下的
jquery radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關
設置
獲取一組radio被選中項的值:var item = $('input[name=items][checked]').val();
獲取select被選中項的文本
var item = $("select[@name=items] option[@selected]").text();
獲取select被選中項的文本 :var item = $("select[name=items] option[selected]").text(); 或$("select[name=items]").find("option:selected").text();
select下拉框的第二個元素爲當前選中值:$('#select_id')[0].selectedIndex = 1;
select下拉框value = 'val'的元素爲當前選中項:$("select[name=items] option[value='val']").attr("selected","selected");
radio單選組的第二個元素爲當前選中項 :$('input[@name=items]').get(1).checked = true; 或$('input[name=items]').attr("checked", '1′);
radio的value = 'val'的元素爲當前選中項:$('input[name=items] [value='val']').attr("checked","checked");
獲取值:
文本框,文本區域:$("#txt").attr("value");
多選框checkbox:$("input[name='checkbox':checked]").each(function(){
var val = $(this).val();
});
單選組radio: $("input[type=radio][checked]").val();
下拉框select的value值: $('select').val();
下拉框select選中的text 值:$("select").find("option:selected").text();
控制表單元素:
文本框,文本區域:$("#txt").attr("value","); //清空內容
$("#txt").attr("value",'11′); //填充內容
多選框checkbox:
checkbox的第二個元素被打勾:$("input[name=items]").get(1).checked = true; //打勾
$("input[name=items]").get(1).checked = false; //不打勾
checkbox的value='val'的元素前打勾:$("input[name=item][value='val']").attr("checked",true); 或$("input[name=item][value='val']").attr("checked","checked");
if($("input[name=item][value='val']").attr('checked')==true) //判斷是否已經打勾
單選組radio: $("input[type=radio]").attr("checked",'2′);//設置value=2的項目爲當前選中項
下拉框select: $("#sel").attr("value",'-sel3′);//設置value=-sel3的項目爲當前選中項
$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
jQuery獲取Radio選擇的Value值
代碼
$("input[name='radio_name'][checked]").val(); //選擇被選中Radio的Value值
$("#text_id").focus(function(){//code...}); //事件 當對象text_id獲取焦點時觸發
$("#text_id").blur(function(){//code...}); //事件 當對象text_id失去焦點時觸發
$("#text_id").select(); //使文本框的Vlaue值成選中狀態
$("input[name='radio_name'][value='要選中Radio的Value值'").
attr("checked",true); //根據Value值設置Radio爲選中狀態
jQuery獲取CheckBox選擇的Value值
$("input[name='checkbox_name'][checked]"); //選擇被選中CheckBox元素的集合 如果你想得到
Value值你需要遍歷這個集合
$($("input[name='checkbox_name'][checked]")).
each(function(){arrChk+=this.value + ',';});//遍歷被選中CheckBox元素的集合 得到Value值
$("#checkbox_id").attr("checked"); //獲取一個CheckBox的狀態(有沒有被選中,返回true/false)
$("#checkbox_id").attr("checked",true); //設置一個CheckBox的狀態爲選中(checked=true)
$("#checkbox_id").attr("checked",false); //設置一個CheckBox的狀態爲不選中(checked=false)
$("input[name='checkbox_name']").attr
("checked",$("#checkbox_id").attr("checked"));//根據3,4,5條,你可以分析分析這句代碼的意思
$("#text_id").val().split(","); //將Text的Value值以','分隔 返回一個數組
二、JQuery的核心的一些方法
each(callback) ‘就像循環
$(“Element”).length; ‘元素的個數，是個屬性
$(“Element”).size(); ’也是元素的個數，不過帶括號是個方法
$(“Element”).get(); ‘某個元素在頁面中的集合，以數組的形式存儲
$(“Element”).get(index); ’功能和上面的相同，index表示第幾個元素，數組的下標
$(“Element”).get().reverse(); ‘把得到的數組方向
$(“Element1″).index($(“Element2″)); ’元素2在元素1中的索引值是。。。
4、基本對象獲取(注意這裏獲取的都是Jquery對象而不是Dom對象哦，但是他倆是可以轉換滴)
$(“*”) ‘表示獲取所有對象 但是我至今沒這樣用過
$(“#XXX”) ’獲得 id=XXX 的元素對象（id可以是標籤的id或CSS樣式id） 常用
$(“input[name='username']“) 獲得input標籤中name=’userName’的元素對象 常用
$(“.abc”) ‘ 獲得樣式class的名字是.abc的元素對象 常用
$(“div”) ‘ 標籤選擇器 選擇所有的div元素 常用
$(“#a,.b,span”) ‘表示獲得ID是a的元素和使用了類樣式b的元素以及所有的span元素
$(“#a .b p”) ‘ID號是a的並且使用了 b樣式的 所有的p元素
<html> <head> <title>jquery測試</title> <meta http-equiv="content-type" content="text/html;
charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.4.1.js"></script> <style type="text/css"> .checkCss{ color:blue; } .redioCss{ color:red; } </style> <script type="text/javascript"> $(function(){ // $("#XXX") 獲得id=XXX的所有Jquery對象 $("#subt").click(function(){ // $("XXX") 獲得XXX標籤名的所有Jquery對象 alert("input 標籤的對象個數爲："+$("input").length); // $("XXX[name='YYY']")
獲得XXX標籤名下name='YYY'的所有Jquery對象 // val()獲得屬性值 alert("name='userName'的輸入框內容爲："+$("input[name='userName']").val()); // 注意獲得value值的第二種方式 alert("name='note'的輸入框內容爲："+$("input[name='note']").attr("value")); alert("下拉菜單被選中項的文本爲："+$("#sex
option:selected").text()); alert("下拉菜單被選中項的值爲："+$("#sex").val()); alert("複選框選中的個數爲："+$("input[name='check']:checked").length); if($("input[name='check']:checked").length>0){ var allCheckValue=""; var allCheckText=""; $("input[name='check']:checked").each(function(){ allCheckValue+=$(this).val()+"
"; allCheckText+=$(this).parent(".checkCss").text()+"
"; }); alert("複選框選中的文本爲："+allCheckText+"
值爲："+allCheckValue); } if($("input[name='status']:checked").length>0){ alert(" 單選框選中的文本爲："+$("input[name='status']:checked").parent(".redioCss").text()+"
值爲："+$("input[name='status']:checked").val()); } }); }); </script> </head> <body> 姓名：<input type="text" name="userName" width="250"><br> 性別：<select id="sex" name="userSex" style="width:
155"> <option value="1">男</option> <option value="2">女</option> <option value="3">不男不女</option> </select><br> 愛好：<span class="checkCss"><input type="checkbox" name="check" value="1">旅遊</span> <span class="checkCss"><input type="checkbox" name="check" value="2">音樂</span><br> <span class="checkCss"><input type="checkbox" name="check" value="3">體育</span> <span class="checkCss"><input type="checkbox" name="check" value="4">文學</span><br> 狀態：<span class="redioCss"><input type="radio" name="status" value="1">在職</span> <span class="redioCss"><input type="radio" name="status" value="2">離職</span><br> 簡介：<input type="text" name="note" width="250"><br> <input type="button" value="提交" id="subt"><br> </body></html>5、層級元素獲取
$("Element1 Element2 Element3 ....") '前面父級 後面是子集
$("div > p") '獲取div下面的所有的 p元素
$("div + p") 'div元素後面的第一個 p元素
$("div ~ p") 'div後面的所有的 p元素
6、簡單對象獲取
$("Element:first") 'HTML頁面中某類元素的第一個元素
$("Element:last") 'HTML頁面中某類元素的最後一個元素
$("Element:not(selector)") '去除所有與給定選擇器匹配的元素,如：$("input:not(:checked)") 表示選擇所有沒有選中的複選框
$("Element:even") '獲得偶數行
$("Element:odd“）'獲得奇數行
$("Element:eq(index)") '取得一個給定的索引值
$("Element:gt(index)") '取得給定索引值的元素 之後的所有元素
$("Element:lt(index)") '取得給定索引值的元素 之前的所有元素
。。。
7、內容對象的獲取和對象可見性
$("Element:contains(text)") '元素中是否包含text文本內容
$('Element:empty") '獲得元素不包含子元素或文本的
$("Element:partnt") '獲得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某個元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '選擇所有可見元素
$("Element:visible") '選擇所有不可見元素
8、其他對象獲取方法
$("Element[id]") '所有帶有ID屬性的元素
$("Element[attribute = youlika ]" '獲得所有某個屬性爲youlika的元素
$("Element[attribute != youlika ]" '獲得所有某個屬性爲不是youlika的元素
$("Element[attribute ^= youlika ]" '獲得所有某個屬性爲不是youlika的開頭的元素
$("Element[attribute $= youlika ]" '獲得所有某個屬性爲不是youlika的結尾的元素
$("Element[attribute *= youlika ]" '獲得所有某個屬性包含youlika的開頭的元素
$("Element[selector1][selector2][....]") ’符合屬性選擇器，比如$("input[id][name][value=youlika ]")表示獲得帶有ID、Name以及value是youlika 的input元素。
9、子元素的獲取
$("Element:nth-child(index)") '選擇父級下面的第n個元素
$("Element:nth-child(even)") '選擇父級下面的偶數
$("Element:nth-child(odd)") '選擇父級下面的奇數
$("Element:nth-child(3n+1)") '表達式
$("Element:first-child") '選擇父級下面的第一個子元素
$("Element:last-child") '選擇父級下面的最後一個子元素
$("Element:only-child") '匹配父級下的唯一的一個子級元素，例如dt在dl列表中唯一，那麼將選擇dt
10、表單對象獲取
$(:input)//查找所有的Input元素，當然也包括下拉列表，文本域，單選框，複選框等。
$(:text)//匹配所有的單行文本框
$(:password)//匹配所有的密碼框
$(:radio)//匹配所有的單選按鈕
$(:checkbox)//匹配所有的複選框
$(:submit)//匹配所有的提交按鈕
$(:image)//匹配所有的圖像域，例如<input type="image" />
$(:reset)//匹配所有的重置按鈕
$(:button)//匹配所有的按鈕
$(:file)//匹配所有的文件上傳域
$(:hidden)//匹配所有的不可見元素或者type爲hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的單選按鈕
$(:disabled)//匹配所有的不可用input元素，作用與上相反
$(:checked)//匹配所有選中的複選框元素
$(:selected)//匹配所有的下拉列表
11、元素屬性的設置與移除
$("Element").attr(name) '取得第一個匹配的屬性值，比如$("img").attr("src")
$("Element".attr(key,value)") '某一個元素設置屬性
$("Element".attr({key:value,key1:value,....})) ‘爲某個元素一次性設置多個屬性
$("Element").attr(key,function) '爲所有匹配的元素設置一個計算的屬性值。
$("Element").removeAttr(name)//移除某一個屬性 12.JQuery獲取SELECT選擇的值:var sel=$("select[name='clientId']").val() , clientId爲select的name屬性
13.清空select下拉列表: sel.options.length=0;
14.爲select添加子項:var opt = new Option('Hello', 'World'); , Hello是value,World對應下拉的顯示值,如果設置該項爲選中的話:
opt.selected=true; sel.options.add(opt);
