1. 技术文章
  2. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

由 别等时光非礼了梦想. 提交于 2020-02-07 04:28:07

 

 

在使用 Javascript 编写前台脚本的时候，经常会操作 Html 控件，比如 checkbox、radio、select，用 Jquery 库操作其他会方便很多，下面用Jq对这些控件的操作进行一个全面的代码总结。

一、Jquery 对 CheckBox 的操作：

<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="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)") 结果返回：<input id="ckb2" name="ckb" value="1" type="checkbox" /><span>排球</span>

(3) 获得所有禁用的 checkbox 控件： $("input[type=checkbox]:disabled") 结果返回： <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span> <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>

(4)获得所有启用的checkbox控件 $("input:checkbox[disabled=false]") 结果返回： <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>         <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>

(5)获得所有checked的checkbox控件 $("input:checkbox:checked") 结果返回： <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>         <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>

(6)获取所有未checkd的checkbox控件 $("input:checkbox:[checked=false]") 结果返回： <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>         <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>

(7)获得value 为 0 的checkbox 控件 $("input[type=checkbox][value=0]") 结果返回： <input id="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、取值：  

  function GetCkboxValues() {     var str="";    $("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 的操作：

<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>
<input name="edu" value="1" type="radio" /><span>本科</span>
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="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)") 结果返回：<input name="edu" value="1" type="radio" /><span>本科</span>

(3)获得所有禁用的 Radio 控件 $("input:radio:disabled") 结果返回： <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>         <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(4)获得所有启用的 Radio 控件 $("input:radio[disabled=false]") 结果返回： <input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>         <input name="edu" value="1" type="radio" /><span>本科</span>

(4)获得checked的 RadioButton 控件 $("input:radio:checked") //等同于 $("input[type=radio][checked]") 结果返回： <input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>

(5)获取未checked的 RadioButton 控件 $("input:radio[checked=false]").attr("disabled", true); 结果返回： <input name="edu" value="1" type="radio" /><span>本科</span>         <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>         <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(6)获得value 为 0 RadioButton 控件 $("input[type=radio][value=0]") 结果返回：<input name="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控件是否选中，未选中则选中：   var v = $("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 操作

复制代码
<select id="cmbxGame">
   <option value="0" selected="selected">黑猫警长</option>
   <option value="1" disabled="disabled">大头儿子</option>
   <option value="2">熊出没</option>
   <option value="3">喜羊羊</option>
</select>
复制代码

1、禁用：

(1)禁用select 控件 $("select").attr("disabled", true);

(2)禁用select中所有option $("select option").attr("disabled", true);

(3)禁用value=2 的option $("select option[value=2]").attr("disabled", true);

(4)启用被禁用的option $("select option:disabled").attr("disabled", false);

2、选择：

（1）option 值为 2 的被选择： var v = $("select option[value=2]").attr("selected");   if (!v) {   $("select option[value=2]").attr("selected", true);   }

(2) 索引为 2 的option 项 被选择 $("select")[0].selectedIndex = 2; 或者 $("select").get(0).selectedIndex = 2; 或者 $("select option[index=2]").attr("selected", true);

3、获取选择项的索引：

(1)获取选中项索引: jq 中的 get 函数是将jq对象转换成了dom元素 var selectIndex = $("select").get(0).selectedIndex; 或者 var selectIndex = $("select option:selected").attr("index");

(2)获取最大项的索引： var maxIndex = $("select option:last").attr("index") 或者  var maxIndex = $("select option").length - 1

4、删除select 控件中的option

(1)清空所有option $("select option").empty();

(2)删除 value=2 的option $("select option[value=2]").remove();

(3)删除第一个option $("select option[index=0]").remove();

(4)删除 text="熊出没" 的option $("select option[text=熊出没]").remove();  //此方法某些浏览器不支持用下面的方法替代

注意：each 中不能用break 用return false 代替，continue 用 return true 代替 $("select option").each(function () {   if ($(this).text() == "熊出没") {   $(this).remove();   return false;   }     });

5、在select中插入option

(1)在首位置插入 option 并选择 $("select").prepend("<option value='0'>请选择</option>"); $("select option[index=0]").attr("selected", true);

(2)在尾位置插入 option 并选择 $("select").append("<option value=\"5\">哪吒闹海</option>"); var maxIndex = $("select option:last").attr("index") $("select option[index=" + maxIndex + "]").attr("selected", true);

(3)在固定位置插入 比如第一个option 项之后插入 新的option 并选择 $("<option value=\"5\">哪吒闹海</option>").insertAfter("select option[index=0]"); 或者$("select option[index=0]").after("<option value=\"5\">哪吒闹海</option>");     $("select option[index=1]").attr("selected", true);

6、取值：

function GetCbxSelected() {     var v = $("select option:selected").val();     var t = $("select option:selected").text();     alert("值:" + v + "文本:" + t); }

--=源码下载=--

在使用 Javascript 编写前台脚本的时候，经常会操作 Html 控件，比如 checkbox、radio、select，用 Jquery 库操作其他会方便很多，下面用Jq对这些控件的操作进行一个全面的代码总结。

一、Jquery 对 CheckBox 的操作：

<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="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)") 结果返回：<input id="ckb2" name="ckb" value="1" type="checkbox" /><span>排球</span>

(3) 获得所有禁用的 checkbox 控件： $("input[type=checkbox]:disabled") 结果返回： <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span> <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>

(4)获得所有启用的checkbox控件 $("input:checkbox[disabled=false]") 结果返回： <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>         <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>

(5)获得所有checked的checkbox控件 $("input:checkbox:checked") 结果返回： <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>         <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>

(6)获取所有未checkd的checkbox控件 $("input:checkbox:[checked=false]") 结果返回： <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>         <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>

(7)获得value 为 0 的checkbox 控件 $("input[type=checkbox][value=0]") 结果返回： <input id="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、取值：  

  function GetCkboxValues() {     var str="";    $("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 的操作：

<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>
<input name="edu" value="1" type="radio" /><span>本科</span>
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="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)") 结果返回：<input name="edu" value="1" type="radio" /><span>本科</span>

(3)获得所有禁用的 Radio 控件 $("input:radio:disabled") 结果返回： <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>         <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(4)获得所有启用的 Radio 控件 $("input:radio[disabled=false]") 结果返回： <input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>         <input name="edu" value="1" type="radio" /><span>本科</span>

(4)获得checked的 RadioButton 控件 $("input:radio:checked") //等同于 $("input[type=radio][checked]") 结果返回： <input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>

(5)获取未checked的 RadioButton 控件 $("input:radio[checked=false]").attr("disabled", true); 结果返回： <input name="edu" value="1" type="radio" /><span>本科</span>         <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>         <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(6)获得value 为 0 RadioButton 控件 $("input[type=radio][value=0]") 结果返回：<input name="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控件是否选中，未选中则选中：   var v = $("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 操作

复制代码
<select id="cmbxGame">
   <option value="0" selected="selected">黑猫警长</option>
   <option value="1" disabled="disabled">大头儿子</option>
   <option value="2">熊出没</option>
   <option value="3">喜羊羊</option>
</select>
复制代码

1、禁用：

(1)禁用select 控件 $("select").attr("disabled", true);

(2)禁用select中所有option $("select option").attr("disabled", true);

(3)禁用value=2 的option $("select option[value=2]").attr("disabled", true);

(4)启用被禁用的option $("select option:disabled").attr("disabled", false);

2、选择：

（1）option 值为 2 的被选择： var v = $("select option[value=2]").attr("selected");   if (!v) {   $("select option[value=2]").attr("selected", true);   }

(2) 索引为 2 的option 项 被选择 $("select")[0].selectedIndex = 2; 或者 $("select").get(0).selectedIndex = 2; 或者 $("select option[index=2]").attr("selected", true);

3、获取选择项的索引：

(1)获取选中项索引: jq 中的 get 函数是将jq对象转换成了dom元素 var selectIndex = $("select").get(0).selectedIndex; 或者 var selectIndex = $("select option:selected").attr("index");

(2)获取最大项的索引： var maxIndex = $("select option:last").attr("index") 或者  var maxIndex = $("select option").length - 1

4、删除select 控件中的option

(1)清空所有option $("select option").empty();

(2)删除 value=2 的option $("select option[value=2]").remove();

(3)删除第一个option $("select option[index=0]").remove();

(4)删除 text="熊出没" 的option $("select option[text=熊出没]").remove();  //此方法某些浏览器不支持用下面的方法替代

注意：each 中不能用break 用return false 代替，continue 用 return true 代替 $("select option").each(function () {   if ($(this).text() == "熊出没") {   $(this).remove();   return false;   }     });

5、在select中插入option

(1)在首位置插入 option 并选择 $("select").prepend("<option value='0'>请选择</option>"); $("select option[index=0]").attr("selected", true);

(2)在尾位置插入 option 并选择 $("select").append("<option value=\"5\">哪吒闹海</option>"); var maxIndex = $("select option:last").attr("index") $("select option[index=" + maxIndex + "]").attr("selected", true);

(3)在固定位置插入 比如第一个option 项之后插入 新的option 并选择 $("<option value=\"5\">哪吒闹海</option>").insertAfter("select option[index=0]"); 或者$("select option[index=0]").after("<option value=\"5\">哪吒闹海</option>");     $("select option[index=1]").attr("selected", true);

6、取值：

function GetCbxSelected() {     var v = $("select option:selected").val();     var t = $("select option:selected").text();     alert("值:" + v + "文本:" + t); }

--=源码下载=--

标签
select
radio
str函数
羽毛球
html代码
input
option
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!