JQuery中_Radio、DropDownList、Checkbox选择控件的处理

Radio

1.获取选中值，三种方法都可以：

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2.设置第一个Radio为选中值：
$('input:radio:first').attr('checked', 'checked'); 或者
$('input:radio:first').attr('checked', 'true'); 注： attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.设置最后一个Radio为选中值： $('input:radio:last').attr('checked', 'checked');
　　　　　　　　　　　　或者 $('input:radio:last').attr('checked', 'true');

4.根据索引值设置任意一个radio为选中值：

$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');

5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true'); 或者
$("input[value='rd2']").attr('checked','true');

6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();

7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();

8.遍历Radio
$('input:radio').each(function(index,domEle){ //写入代码 });
DropDownList JQuery中_Radio、DropDownList、Checkbox选择控件的处理

1. 获取选中项：获取选中项的Value值： $('select#sel option:selected').val(); 或者
$('select#sel').find('option:selected').val(); 获取选中项的Text值：
$('select#seloption:selected').text(); 或者
$('select#sel').find('option:selected').text();

2. 获取当前选中项的索引值：
$('select#sel').get(0).selectedIndex;

3. 获取当前option的最大索引值：
$('select#sel option:last').attr("index")

4. 获取DropdownList的长度：
$('select#sel')[0].options.length; 或者
$('select#sel').get(0).options.length;

5. 设置第一个option为选中值：
$('select#sel option:first').attr('selected','true') 或者
$('select#sel')[0].selectedIndex = 0;

6. 设置最后一个option为选中值：
$('select#sel option:last).attr('selected','true')

7. 根据索引值设置任意一个option为选中值： $('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....

8. 设置Value=4 的option为选中值： $('select#sel').attr('value','4'); 或者
$("select#sel option[value='4']").attr('selected', 'true');

9. 删除Value=3的option： $("select#sel option[value='3']").remove();
10.删除第几个option： $(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio: $(" select#sel option ").eq(2).remove();

11.删除第一个option： $(" select#sel option ").eq(0).remove(); 或者
$("select#sel option:first").remove();

12. 删除最后一个option：
$("select#sel option:last").remove();

13. 删除dropdownlist:
$("select#sel").remove();

14.在select后面添加一个option:
$("select#sel").append("<option value='6'>f</option>");

15. 在select前面添加一个option: $("select#sel").prepend("<option value='0'>0</option>");

16. 遍历option： $(' select#sel option ').each(function (index, domEle) { //写入代码 }); CheckBox

1. 获取单个checkbox选中项(三种写法)：
$("input:checkbox:checked").val() 或者
$("input:[type='checkbox']:checked").val(); 或者
$("input:[name='ck']:checked").val();

2. 获取多个checkbox选中项：
$('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } });

3. 设置第一个checkbox 为选中值：
$('input:checkbox:first').attr("checked",'checked'); 或者
$('input:checkbox').eq(0).attr("checked",'true');

4. 设置最后一个checkbox为选中值：
$('input:radio:last').attr('checked', 'checked'); 或者
$('input:radio:last').attr('checked', 'true');

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

6. 选中多个checkbox：同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true');

7. 根据Value值设置checkbox为选中值：
$("input:checkbox[value='1']").attr('checked','true');

8. 删除Value=1的checkbox： $("input:checkbox[value='1']").remove();

9. 删除第几个checkbox： $("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox: $("input:checkbox").eq(2).remove();

10.遍历checkbox：
$('input:checkbox').each(function (index, domEle) { //写入代码 });
11.全部选中 $('input:checkbox').each(function() {
$(this).attr('checked', true); });

12.全部取消选择：
$('input:checkbox').each(function () { $(this).attr('checked',false); });

===========================以下代码和上面大多是重复的=============================

jQuery获取Select选择的Text和Value：

语法解释：
1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的Text和Value：

语法解释：
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中

2. $("#select_id ").val(4); //设置Select的Value值为4的项选中

3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项：
语法解释：

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

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下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;

$("#select_id'").attr("value", '12'); //设置value=12的项目为当前选中项
$("select#select_id option:last").attr('selected', true); //设置下拉列表中的最后一个值为当前选中

radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；

单选组radio： $("input[@type=radio][@checked]").val();

下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容

$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾

$("#chk2").attr("checked",true);//打勾

if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组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()；//清空下拉框

-------------------------------------------------------------------

//遍历option和添加、移除

option function changeShipMethod(shipping){ 

var len = $("select[@name=ISHIPTYPE] option").length 

if(shipping.value != "CA"){ 
$("select[@name=ISHIPTYPE] option").each(function(){

if($(this).val() == 111){

$(this).remove();

} }); 
}else{
 $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); 
}
 }

//取得下拉選單的選取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();

JQuery中_Radio、DropDownList、Checkbox选择控件的处理

相关推荐