Jquery 操作Html 控件 CheckBox、Radio、Select 控件
http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
在使用Javascript编写前台脚本的时候，经常会操作Html控件，比如checkbox、radio、select，用Jquery库操作其他会方便很多，下面用Jq对这些控件的操作进行一个全面的代码总结。
一、Jquery对CheckBox的操作：
<inputid="ckb1"name="ckb"checked="checked"value="0"type="checkbox"/><span>篮球</span>
<inputid="ckb2"name="ckb"checked="checked"value="1"type="checkbox"/><span>排球</span>
<inputid="ckb3"name="ckb"disabled="disabled"value="2"type="checkbox"/><span>乒乓球</span>
<inputid="ckb4"name="ckb"disabled="disabled"value="3"type="checkbox"/><span>羽毛球</span>
1、查找控件：
(1)选择所有的checkbox控件：
根据input类型选择：$("input[type=checkbox]")等同于文档中的$("input:checkbox")
根据名称选择：$("input[name=ckb]")
(2)根据索引获取checkbox控件：
$("input:checkbox:eq(1)")
结果返回：<inputid="ckb2"name="ckb"value="1"type="checkbox"/><span>排球</span>
(3)获得所有禁用的checkbox控件：
$("input[type=checkbox]:disabled")
结果返回：
<inputid="ckb3"name="ckb"disabled="disabled"value="2"type="checkbox"/><span>乒乓球</span>
<inputid="ckb4"name="ckb"disabled="disabled"value="3"type="checkbox"/><span>羽毛球</span>
(4)获得所有启用的checkbox控件
$("input:checkbox[disabled=false]")
结果返回：
<inputid="ckb1"name="ckb"checked="checked"value="0"type="checkbox"/><span>篮球</span>
<inputid="ckb2"name="ckb"checked="checked"value="1"type="checkbox"/><span>排球</span>
(5)获得所有checked的checkbox控件
$("input:checkbox:checked")
结果返回：
<inputid="ckb1"name="ckb"checked="checked"value="0"type="checkbox"/><span>篮球</span>
<inputid="ckb2"name="ckb"checked="checked"value="1"type="checkbox"/><span>排球</span>
(6)获取所有未checkd的checkbox控件
$("input:checkbox:[checked=false]")
结果返回：
<inputid="ckb3"name="ckb"disabled="disabled"value="2"type="checkbox"/><span>乒乓球</span>
<inputid="ckb4"name="ckb"disabled="disabled"value="3"type="checkbox"/><span>羽毛球</span>
(7)获得value为0的checkbox控件
$("input[type=checkbox][value=0]")
结果返回：
<inputid="ckb1"name="ckb"checked="checked"value="0"type="checkbox"/><span>篮球</span>
2、禁用：
(1)禁用所有的checkbox控件：
$("input:checkbox").attr("disabled",true)
(2)启用某些禁用的checkbox控件：
$("input:checkbox:disabled").attr("disabled",false);
(3)判断value=0的checkbox是否禁用:
if($("input[name=ckb][value=0]").attr("disabled")==true){
alert("不可用");
}
else{
alert("可用");
}
3、选择：
(1)全选：
$("input:checkbox").attr("checked",true);
(2)全不选：
$("input:checkbox").attr("checked",false);
(3)反选：
$("input:checkbox").each(function(){
if($(this).attr("checked")){
//$(this).removeAttr("checked");
$(this).attr("checked",false);
}
else{
$(this).attr("checked",true);
}
});
4、取值：
functionGetCkboxValues(){
varstr="";
$("input:checkbox:checked").each(function(){
switch($(this).val()){
case"0":
str+="篮球,";
break;
case"1":
str+="排球,";
break;
case"2":
str+="乒乓球,";
break;
case"3":
str+="羽毛球,";
break;
}
});
str=str.substring(0,str.length-1)
}
二、Jquery对Radio的操作：
<inputname="edu"value="0"type="radio"checked="checked"/><span>专科</span>
<inputname="edu"value="1"type="radio"/><span>本科</span>
<inputname="edu"value="2"type="radio"disabled="disabled"/><span>研究生</span>
<inputname="edu"value="3"type="radio"disabled="disabled"/><span>博士生</span>
1、查找控件：
(1)选择所有的Radio控件
//根据input类型选择
$("input[type=radio]")//等同于文档中的$("input:radio")
//根据名称选择
$("input[name=edu]")
(2)根据索引获得Radio控件
$("input:radio:eq(1)")
结果返回：<inputname="edu"value="1"type="radio"/><span>本科</span>
(3)获得所有禁用的Radio控件
$("input:radio:disabled")
结果返回：
<inputname="edu"value="2"type="radio"disabled="disabled"/><span>研究生</span>
<inputname="edu"value="3"type="radio"disabled="disabled"/><span>博士生</span>
(4)获得所有启用的Radio控件
$("input:radio[disabled=false]")
结果返回：
<inputname="edu"value="0"type="radio"checked="checked"/><span>专科</span>
<inputname="edu"value="1"type="radio"/><span>本科</span>
(4)获得checked的RadioButton控件
$("input:radio:checked")//等同于$("input[type=radio][checked]")
结果返回：
<inputname="edu"value="0"type="radio"checked="checked"/><span>专科</span>
(5)获取未checked的RadioButton控件
$("input:radio[checked=false]").attr("disabled",true);
结果返回：
<inputname="edu"value="1"type="radio"/><span>本科</span>
<inputname="edu"value="2"type="radio"disabled="disabled"/><span>研究生</span>
<inputname="edu"value="3"type="radio"disabled="disabled"/><span>博士生</span>
(6)获得value为0RadioButton控件
$("input[type=radio][value=0]")
结果返回：<inputname="edu"value="0"type="radio"checked="checked"/><span>专科</span>
2、禁用：
(1)禁用所有的Radio
$("input:radio").attr("disabled",true);
或者$("input[name=edu]").attr("disabled",true);
(2)禁用索引为1的Radio控件
$("input:radio:eq(1)").attr("disabled",true);
(3)启用禁用的Radio控件
$("input:radio:disabled").attr("disabled",false);
(4)禁用当前已经启用的Radio控件
$("input:radio[disabled=false]").attr("disabled",true);
(5)禁用checked的RadioButton控件
$("input[type=radio][checked]").attr("disabled",true);
(6)禁用未checked的RadioButton控件
$("input:[type=radio][checked=false]").attr("disabled",true);
(7)禁用value=0的RadioButton
$("input[type=radio][value=0]").attr("disabled",true);
3、取值：
$("input:radio:checked").val()
4、选择：
(1)判断value=1的radio控件是否选中，未选中则选中：
varv=$("input:radio[value=1]").attr("checked");
if(!v){
$("input:radio[value=1]").attr("checked",true);
}
(2)转换成Dom元素数组来进行控制选中：
$("input:radio[name=edu]").get(1).checked=true;
三、Jquery对Select操作
复制代码
<selectid="cmbxGame">
<optionvalue="0"selected="selected">黑猫警长</option>
<optionvalue="1"disabled="disabled">大头儿子</option>
<optionvalue="2">熊出没</option>
<optionvalue="3">喜羊羊</option>
</select>
复制代码
1、禁用：
(1)禁用select控件
$("select").attr("disabled",true);
(2)禁用select中所有option
$("selectoption").attr("disabled",true);
(3)禁用value=2的option
$("selectoption[value=2]").attr("disabled",true);
(4)启用被禁用的option
$("selectoption:disabled").attr("disabled",false);
2、选择：
（1）option值为2的被选择：
varv=$("selectoption[value=2]").attr("selected");
if(!v){
$("selectoption[value=2]").attr("selected",true);
}
(2)索引为2的option项被选择
$("select")[0].selectedIndex=2;
或者$("select").get(0).selectedIndex=2;
或者$("selectoption[index=2]").attr("selected",true);
3、获取选择项的索引：
(1)获取选中项索引:jq中的get函数是将jq对象转换成了dom元素
varselectIndex=$("select").get(0).selectedIndex;
或者varselectIndex=$("selectoption:selected").attr("index");
(2)获取最大项的索引：
varmaxIndex=$("selectoption:last").attr("index")
或者varmaxIndex=$("selectoption").length-1
4、删除select控件中的option
(1)清空所有option
$("selectoption").empty();
(2)删除value=2的option
$("selectoption[value=2]").remove();
(3)删除第一个option
$("selectoption[index=0]").remove();
(4)删除text="熊出没"的option
$("selectoption[text=熊出没]").remove();//此方法某些浏览器不支持用下面的方法替代
注意：each中不能用break用returnfalse代替，continue用returntrue代替
$("selectoption").each(function(){
if($(this).text()=="熊出没"){
$(this).remove();
returnfalse;
}
});
5、在select中插入option
(1)在首位置插入option并选择
$("select").prepend("<optionvalue='0'>请选择</option>");
$("selectoption[index=0]").attr("selected",true);
(2)在尾位置插入option并选择
$("select").append("<optionvalue=\"5\">哪吒闹海</option>");
varmaxIndex=$("selectoption:last").attr("index")
$("selectoption[index="+maxIndex+"]").attr("selected",true);
(3)在固定位置插入比如第一个option项之后插入新的option并选择
$("<optionvalue=\"5\">哪吒闹海</option>").insertAfter("selectoption[index=0]");
或者$("selectoption[index=0]").after("<optionvalue=\"5\">哪吒闹海</option>");
$("selectoption[index=1]").attr("selected",true);
6、取值：
functionGetCbxSelected(){
varv=$("selectoption:selected").val();
vart=$("selectoption:selected").text();
alert("值:"+v+"文本:"+t);
}