首页 > JS专栏 > JQuery选择器及radio、checkbox、select取值和反选
2015
07-22

JQuery选择器及radio、checkbox、select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 

$("div")                选择所有的div标签元素,返回div元素数组 

$(".myClass")       选择使用myClass类的css的所有元素 

$("*")                   选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

层叠选择器:

$("form input")      选择所有的form元素中的input元素 

$("#main > *")       选择id值为main的所有的子元素 

$("label + input")  选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 

$("#prev ~ div")     同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

表单元素选择器:

$(":input")           选择所有的表单输入元素,包括input, textarea, select 和 button

$(":text")             选择所有的text input元素 

$(":password")    选择所有的password input元素 

$(":radio")           选择所有的radio input元素 

$(":checkbox")    选择所有的checkbox input元素 

$(":submit")        选择所有的submit input元素 

$(":image")         选择所有的image input元素 

$(":reset")           选择所有的reset input元素 

$(":button")        选择所有的button input元素 

$(":file")              选择所有的file input元素 

$(":hidden")       选择所有类型为hidden的input元素或表单的隐藏域

1. 使用jquery获取radio的值

HTML代码:

<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值<br />
<input type="radio" name="testradio" value="jquery获取checkbox的值" />jquery获取checkbox的值<br />
<input type="radio" name="testradio" value="jquery获取select的值" />jquery获取select的值<br />

常用的几种Js代码:

$('input[name="testradio"]:checked').val();
$('input:radio:checked').val(); 
$('input[@name="testradio"][checked]');
$('input[name="testradio"]').filter(':checked');

如果我们要遍历name为testradio的所有radio呢,代码如下:

$('input[name="testradio"]').each(function(){  
     alert(this.value);  
});

如果要取具体某个radio的值,比如第二个radio的值,这样写

$('input[name="testradio"]:eq(1)').val()

2. jquery获取checkbox的操作总结

使用jquery 获取checkbox 一般使用 name 来获取,因为在 form 表单中,同一组的 checkbox 的 name 是相同的,所以我们可以通过下面的代码来获取 checkbox。

js代码:

$('input[name="demo"]:checkbox');

如果要获取 name 为 demo 的所有 checkbox 选项,如果我们要将其选中可以这样写:

$('input[name="demo"]:checkbox').attr('checked','true');

由于我们通常获取 checkbox 获取的是多个,如果我们要获取选中的 checkbox 的值,就要确定是要获取哪个 checkbox 的值,如果这样写:

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

这样写是获取了所有选中的 checkbox 中第一个 checkbox 的值,如果要获取所有的 checkbox 的值,我们可以用 eq() 方法来获取每一个的值,比如:

$('input[name="demo"]:checked').eq(0).val();  
$('input[name="demo"]:checked').eq(1).val();

3. jquery获取select值的方法总结

1)、jquery 获取select的值,也就是被选中的那个 option 的 value 属性的值

//通过 select 的 id  
$('#select_id option:selected').val();  
$('#select_id').find('option:selected').val();  
//或者用原生的方式  
$('#select_id option:selected')[0].value;  
//通过 select 的 name  
$('select[name="select_name"] option:selected').val();  
$('select[name="select_name"]').find('option:selected').val();

2)、jquery获取select被选中的那个 option 的 innerHTML 值(即text值,也就是在<option></option>中间的内容)

//通过 select 的 id  
$('#select_id option:selected').text();  
$('#select_id').find('option:selected').text();  
//或者用原生的方式  
$('#select_id option:selected')[0].innerHTML;  
//通过 select 的 name  
$('select[name="select_name"] option:selected').text();  
$('select[name="select_name"]').find('option:selected').text();

反选radio

this.checked = false;

或者

$(this).prop('checked', false);

注:以上部分内容来自互联网,版权归原作者所有。


留下一个回复