Jquery中对radiobutton、checkbox、dropdownlist等一些基本操作总结

最近在写一些JS，但苦于这些东西不是每次都要用，经常容易忘记，搞的每次都要去网上搜集资料，现记下来以备不时之需：

radiobutton：

Html代码 

1. <input id="sc" type="radio" name="Type" value="Service Component" onclick="typeChange()">Service Component        
2. <input id="tenant" type="radio" name="Type"  value="Tenant" onclick="typeChange()">Tenant  

 

1、获取某个radio选中的值，有三种方法

$("input:radio:checked").val()(*我最喜欢)  ;

 $("input[type='radio']:cheked").val()   ; 

 $("input[name='Type']:checked").val().

2、后台会根据名字获取相应的选中radio的值，用request.getParameter("Type")

3、设置第一个radio为选中$("input:radio:first").attr("checked","true")

4、设置最后一个radio为选中$("input:radio:last").attr("checked","true")

5、根据索引值设置任意一个radio为选中值$("input:radio").eq(索引值).attr("checked",true)或者           $("input:radio").slice(1,2).attr("checked","true")

6、根据value的值设置选中的radio:$("input[value=Tenant]").attr("checked",true)

7、删除第几个radio：$("input:radio").eq(索引值).remove()   （索引值0,1,2...)

8、遍历$("input:radio").each(index,domEle){}

dropDownList  select

Html代码 

1. <select name="uiType" class="ecv_selectFld"  id="uiType_id" style="color: rgb(0, 0, 0); cursor: pointer;width: 145px;" onChange="uiTypeChange()">  
2.     <option value="-1">--- Please Select ---</option>  
3.         <option value="extension field">extension field</option>  
4.         <option value="dynamic menu">dynamic menu</option>  
5. </select>  

 

1、获取某个选中的值：

$("#uiType_id").val('Extension field');//设置选中值

$("select[name=serviceComponent]").val()  

$("#uiType_id").find('option:selected').val()(*我最喜欢)

$("select#uiType_id option:selected").val()  

$("select[name=uiType]").val(uiType).attr("selected","true");//设置uitype为选中值

//$("#uiType_id").attr("value",val('Extension field')

2、获取当前选中的索引值$("select#uiType_id ").get(0).selectedIndex

3、获取当前的长度$("select#uiType_id ").options.length

4、后台获取根据name  :request.getParameter("uiType")

5.创建option并选中

法一：

var option = new Option(currentTenant, currentTenant);
document.getElementById("curTenantName").add(option);
tenantSelect.attr("value", currentTenant);

法二：

$("#curTenantName").append($("<option/>").val(tenantArr[i]).text(tenantArr[i]));

注意：

本来以为jQuery("#select1").val();是取得选中的值，

那么jQuery("#select1").text();就是取得的文本。

这是不正确的，正确做法是：

jQuery("#select1  option:selected").text();

checkBox:

Html代码 

1. <input type="checkbox" value="1" name="__row_of_commonSearchResult">  
2. <input type="checkbox" value="2" name="__row_of_commonSearchResult">  
3. <input type="checkbox" value="3" name="__row_of_commonSearchResult">  

 

1、后台获取选中的值：request.getParameterValues("__row_of_commonSearchResult");

2、$("input[name=__row_of_commonSearchResult | type=checkbox]").attr("checked","true")

<p><span style="font-family:Arial Black;"><span style="font-size:12px">
</span></span></p><p><span style="font-family:Arial, Helvetica, sans-serif;"><span style="white-space: normal;">
</span></span></p>