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);

}