jquery checkbox radio select操作

选取属性时,jquery1.3.0以后的版本中是不能加@的(如'input[name="bobby"]'),jquery1.3.0以前的要加@的(如'input[@name="hobby"]')

1:获取一组radio被选中项

(0)$('input[@type=radio][@name="hobby"][@checked]') ;//这是最精确的写法,也是速度最快的
(1)$('input:radio[@name="hobby"][@checked]')
(2)$('[:radio[@name="hobby"][@checked]')
(3)$('[@name="hobby"][@checked]')
(4)$('input[@name="hobby"][@checked]');
(5)$('input[@name="hobby"]:checked');
(6)$('input:checked[@name="hobby"]');
(7)$(':input:checkbox:checked[@name="hobby"]')

 

2:获取一组radio未被选中

(1)$('input[@name="hobby"]').not('[@checked]')

 

3:获取一组checkbox被选中项

$('input:checkbox[@name="hobby"][@checked]')


4:获取select被选中项的文本

html代码如下:

Js代码
  1. <select id="hobby" name="hobby">   
  2.      <option value="1">001</option>   
  3.      <option value="2">002</option>   
  4. </select>  
<select id="hobby" name="hobby"> <option value="1">001</option> <option value="2">002</option></select>

(1)$('select[@name="hobby"] option[@selected]').attr('value');//或着$('xxx').text();

如果不写value值, 这个测试在firefox3.5下可以得到值,但在ie6中得不到值

(2)$('#hobby').val();//如果不写value值,通过ie6和firefox,其它未测试

//如果有value值,则两个方法都可以取到value值

所以,$('xx').val()只针对 带有value属性的html表单起会用,可以用$('xxx').val()取到值,也可以用$('xxx').attr('value')取到值


5:select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

或着:$('input[@name=items]').[1].checked = true;

6:获取值:


文本框,文本区域:$("#txt").attr("value"); $("#textArea").val();
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio:   $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();

7:控制表单元素:
文本框,文本区域:

$("#inputText").attr("value",'');//清空内容
$("#textArea").attr("value",'11');//填充内容

$("#textArea").val('11');


多选框checkbox:

$("#chk1").attr("checked",'');//不打勾

$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio:   

1:$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

2:$('input:radio[name="hobby"][value="game"]').attr('checked','true');这样肯定行
下拉框select:  

$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

//添加下拉框的option
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")
$("#sel").empty();//清空下拉框

$("select option:selected").text()

 

8:全选与反选事件

<input type="checkbox" id="selectAllCheckBox"/>

Js代码
  1. $('input:checkbox#selectAllCheckBox').click(function(e){   
  2.     if($(this).attr('checked') ){   
  3.          $('input:checkbox').attr('checked','true');   
  4.      }else{   
  5.          $('input:checkbox').attr('checked','');   
  6.      };   
  7. }); 
posted on 2010-12-26 15:11  Randy0528  阅读(454)  评论(0编辑  收藏  举报