1.radio
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
(1)根据(是否选中)状态取值
(1.1)被选中radio的值
$(":radio[name=sex]:checked").val(); // 写法一
$("input[name=sex]:checked").val(); // 写法二
$("input:radio[name=sex]:checked").val(); // 写法三
$("input[type=radio][name=sex]:checked").val(); // 写法四
(1.2)未选中radio的值(如果一组中都未被选中,默认取第一个未被选中的)
$(":radio[name=sex]:not(:checked)").val();
(2)根据值设置状态(选中或取消)
(2.1)选中指定radio
$("input[name=sex][value='女']").prop("checked", true); // 对于选中或非选中逻辑状态的值用prop方法代替原来的attr
(2.2)取消指定radio
$("input[name=sex][value=女]").prop("checked", false);
jquery选择器的其他用法:
$("input[name=list]:first").prop("checked", true); // 选中多元组中第一个
$("input[name=list]:last").prop("checked", true); // 选中组多元中最后一个
(3)判断是否选中
(3.1)遍历组元素,逐一判断
$("input[name=sex]").each(function(){
if($(this).prop("checked")){ //$(this).is(":checked")
alert($(this).val() +‘被选中’);
}else{
alert($(this).val() +‘未选中’);
}
})
【注意】设置属性时,对选中这种逻辑状态的属性(在界面上可能看不到的属性)建议使用prop()方法,其他看得见的属性用attr()方法。
2. checkbox
<input type="checkbox" name="list" value="十分满意" />十分满意
<input type="checkbox" name="list" value="满意" />满意
<input type="checkbox" name="list" value="不满意" />不满意
<input type="checkbox" name="list" value="非常差" />非常差
(0)获取单个选中的checkbox选中项
$(":checkbox[name=sex]:checked").val();
$("input[name=sex]:checked").val();
$("input:checkbox[name=sex]:checked").val();
$("input[type=checkbox][name=sex]:checked").val();
(1)根据值设置状态(选中或取消)
(1.1)选中指定checkbox
// 对于选中或非选中逻辑状态的值用prop方法代替原来的attr
$("input[name=list][value=十分满意]").prop("checked", true);
(1.2)取消指定checkbox
$("input[name=list][value=十分满意]").prop("checked", false);
jquery选择器的其他用法:
// 选中多元组中第一个
$("input[name=list]:first").prop("checked", true);
// 选中组多元中最后一个
$("input[name=list]:last").prop("checked", true);
// eq(index)
$("input[name=list]:eq(0)").prop("checked", true);
$("input[name=list]").eq(0).prop("checked", true);
// 利用slice()进行多选操作 $(":checkbox[name=list]").slice(0,2).prop("checked", true);
(2)全选
$(":checkbox[name=list]").prop("checked", true);
(3)取消全选
$(":checkbox[name=list]").prop("checked", false);
(4)反选
$(":checkbox[name=list]").each(function(){
if($(this).prop("checked")){
$(this).prop("checked", false);
}else{
$(this).prop("checked", true);
}
});
(5)所选值
var selVal = '';
$(":checkbox[name=list]").each(function(){
if($(this).prop("checked")){
selVal += $(this).val() + ',';
}
});
if(selVal != ''){
selVal = selVal.substring(0, selVal.length - 1);
}
alert('selVal = ' + selVal);
3. select
<select id="s1" name="province">
<option value="">--省份--</option>
<option value="guangdong">广东</option>
<option value="fujian">福建</option>
<option value="zhejiang">浙江</option>
<option value="hunan">湖南</option>
<option value="hubei">湖北</option>
</select>
(1)获取被选中项的值,文本,索引
var selVal = $("#s1").val();
//var selVal2 = $("#s1").find("option:selected").val();
var selTxt = $("#s1").find("option:selected").text();
// var selTxt=$("select[name=province]option:selected").text();
var selIndex = $("#s1").get(0).selectedIndex;
$("#s1 option:last").prop("index"); // 最大索引值
(2)判断某项是否选中
// prop()判断
$("#s1").find("option[value=hubei]").prop("selected");
// is(":selected")判断
$("#s1").find("option:last").is(":selected");
(3)指定一项选中
$("#s1").val('hubei');
// $("#s1").find("option[value=hubei]").prop("selected", true);
// $("#s1").get(0).selectedIndex = 5;
$("#s1").find("option:eq(1)").prop("selected", true); // 让第2项选中
$("#s1").find("option:last").prop("selected", true); // 让最后一项选中
(4)清空选项;获取选项的长度
$("#s1").val('');
$("#s1 option").length;
(5)添加/移除/清空一项
// prepend()在最前面添加;append()在后面添加
$("#s1").append('<option value="beijing">北京</option>');
$("#s1").find("option[value=beijing]").remove();
$("#s1").empty();//清空下拉框
(6)遍历option项
$("select[name=province] option").each(function(){
if($(this).val() == 'beijing'){
alert($(this).val() + ' \n ' + $(this).text());
}
});