禁用、删除、添加、选中、设置select、radio、checkbox

淩亂°似流年 2022-04-17 06:25 204阅读 0赞

## 1、操作select ##

**1）、禁用option**  
**• 除前2个option，其他option都禁用**\*\*  
$("\#selectId option:gt(1)").attr(“disabled”, “”);  
**• 除第1个option，其他option都禁用**  
$("\#selectId").find(“option”).not(":first").attr(“disabled”, “”);  
$("\#selectId").find(“option:not(:first)”).attr(“disabled”, “”);  
$("\#selectId option:not(:first)").attr(“disabled”, “”);

**2)、删除option**  
**• 除前2个option，其他option都删除**  
$("\#selectId option:gt(1)").remove();  
**• 除第1个option，其他option都删除**  
$("\#selectId").find(“option”).not(":first").remove();  
$("\#selectId").find(“option:not(:first)”).remove();  
$("\#selectId option:not(:first)").remove();  
$("\#selectId option:first").siblings().remove();  
**• 删除最后一个option**  
$("\#selectId option:last").remove();  
**• 删除索引option**  
$("\#selectId option:\[index=‘0’\]").remove();  
**• 删除所有option**  
$("\#selectId").empty();

**3)、添加option**  
**• 为select追加一个option**  
$("\#selectId").append(“Text”);  
**• 为select插入一个option(第一个位置)**  
$("\#selectId").prepend(“请选择”);

**4）、选中option**  
**• 选中第一个option**  
$("\#selectId option:first").attr(“selected”);

**5）、获取select选择的option的text和value**  
**• 获取select选择的text**  
$("\#selectId").find(“option:selected”).text();  
$("\#selectId option\[selected\]").text();  
**• 获取select选择的value**  
$(“selectId”).val();  
**• 获取select选择的索引值**  
$(“selectId”).get(0).selectedIndex;  
**• 获取select最大的索引值**  
$("\#selectId option:last").attr(“index”);

## 2、操作radio ##

**1)、获取radio**  
**• 获取一组radio被选中项的值**  
$(‘input\[name=radioName\]’).val();  
$(‘input\[name=radioName\]’).attr(“value”);  
$(‘input\[name=radioName\]\[checked\]’).val();  
**• 获取input中的单选组radio值**  
$(‘input\[type=radio\]\[checked\]’).val();

**2)、选中radio**  
**• 选中第2个radio**  
$(‘input\[name=radioName\]’).get(1).checked = true;  
**• 设置value=2的项目为当前选中项**  
$(“input\[type=radio\]”).attr(“checked”,‘2’);

## 3、操作checkbox ##

**1)、获取checkbox**  
**• 获取选中的多选框的value(只能获取第一个)**  
$(‘input\[name=checkboxName\]’).val();  
$(‘input\[name=checkboxName\]’).attr(“value”);  
$(‘input\[name=checkboxName\]\[checked\]’).val();  
**• 获取选中的多选框的text(text外还要有一层标签才行)**  
$(“input:checkbox\[name=‘checkboxName’\]:checked”).next().text()

**2)、选中checkbox**  
**• 打勾checkbox**  
$(‘input\[name=checkboxName\]’).attr(“checked”,“checked”);  
**• 不打勾checkbox**  
$(‘input\[name=checkboxName\]’).attr(“checked”,"");

**3)、判断是否已打勾**  
if($(‘input\[name=checkboxName\]’).attr(“checked”) == undefined)\{\}