Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 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);
}
Jquery 操作Html 控件 CheckBox、Radio、Select 控件的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jquery操作复选框(checkbox)十二技巧
jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...
- checkbox radio select绑定
index11.html <html><head> <title>checkbox radio select绑定</title> <script ...
- struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox
struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...
- jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- 获取或设置checkbox radio select的值
单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...
- jQuery 操作复选框(checkbox) attr checked不起作用
参考资料 http://www.paobuke.com/develop/javascript/pbk849.html 这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...
- jquery操作复选框(checkbox)的一些小技巧总结
1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...
- jQuery——操作复选框(checkbox) attr checked不起作用
这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成 ...
随机推荐
- MongoDB自定义函数部分 定义及引用
1. //定义一个Sum的函数 db.system.js.save({_id:"Sum", value:function(key,values) { ; ;i <values ...
- Python(2.7.6) 迭代器
除了对列表.集合和字典等进行迭代,还能对其他对象进行迭代:实现 __iter__ 方法的对象.例如, 文件对象就是可迭代的: >>> dir(file) ['__class__', ...
- 重大发现Android studio 如何简单快速修改package name
好多人都发现Android studio修改包名比较麻烦,只能一级一级的修改,今天偶尔发现了一个快捷方法. 废话不多说: 1 打开项目的AndroidManifest.xml文件 2 鼠标光笔定位到你 ...
- namenode无法自动切换的问题
主namenode 为standly状态,备namenode为active,kill备namenode,主namenode能正常切换为active.但是主namenode为active,备nameno ...
- ThreadLocal 设计模式浅谈
部分代码:ThreadLocal中 的get方法, 获得的是当前线程相关的对象 /** * Returns the value in the current thread's copy of this ...
- NetMQ(ZeroMQ)Client => Server => Client 模式的实现
ØMQ (也拼写作ZeroMQ,0MQ或ZMQ)是一个为可伸缩的分布式或并发应用程序设计的高性能异步消息库.它提供一个消息队列, 但是与面向消息的中间件不同,ZeroMQ的运行不需要专门的消息代理(m ...
- iOS scrollView/tableView滚动到底部
//项目要求tableView滚动到底部就自动加载下一页,UITableView继承自UIScrollView 所以可以在//scrollViewDidEndDecelerating这个方法中进行判断 ...
- Java实战之04JavaWeb-07Listener和Filter
一.监听器Listener javaEE的13们规范中 包括servlet技术和jsp技术 servlet规范中包括三门技术:(servlet的三大组件) servelt技术 Listener技术 ...
- C++对象模型与内存位对齐的简单分析(GNU GCC&VS2015编译器)
以Fruit和Apple为例进行分析: Fruit和Apple的定义如下: 通过在两种编译环境下的测试(GNU GCC & VS2015),可以发现这两种编译器的对象模型是一样的,如下图所示: ...
- bzoj2748:[HAOI2012]音量调节
思路:刷水有益健康. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...