jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? ===
val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是value, 就是为获取 表单元素的 value属性的 属性值, 只能针对form表单元素 有效!!
selected选中的是针对 select元素的option, checked是针对checkbox和radio元素.
- select和checkbox的表示 "值" 的方式不同: select是用option标签下 的 包含"文本"值 来表示的; 但是option下也有value属性?
总之,
如果option标签本身有value, 则$("#select").val() // 获取的是value属性的值, 不是文本的值;
如果option标签本身没有value属性, 则$("select").val(), // 获取的是option之间的文本
那么如何处理select的 可以多选的情况? 是用返回的数组来表示的:
**感觉js下的循环等 操作跟c 差不多...
而checkbox & radio 是用其 属性: value的值来表示的.
如何区别 成组的 checkbox和radio? 多个checkbox radio他们的类型是一样的, 而且名称name"属性"也是一样的, 前两者都没有区别! 是通过 各自的 id 或者class 来区别的
要获取checkbox 和 radio组的值, 必须是去获取 被选中的那个item的值, 即必须是用 :checked筛选出来的 那个元素的值, 而且是针对 在实际 选取操作 后的值, 在原始代码中看不到的 .. 当然, 对于 其他form表单元素, 如input-text就不一定了, 文本域可以直接用val获取它的值...
由于如果不写:checked筛选过滤, 则默认返回的是第一个item的value值(不管第一个选项 选中还是没有选中): $(":checkbox").val();
但是, 即使你写了 :checked, 返回的仍然只是 第一个被选中的选项的值 , 不是所有被选中选项的值, 因此, 要想获得 所有([被选中的])选项的值 ,必须使用each函数 travers遍历:
这其实是一个普遍的现象, 不只是对checkbox, 对其他表单元素, 如input type="text"来说, 也是一样: val()只能获得一个同类的 表单元素 集合中的 第一个 元素的value值, 要获得所有的 值, 要用each来遍历:
这是自我总结出来的, 网上也有文章明确的谈到了这一点: http://blog.csdn.net/gao454917848/article/details/39155947
要避免一种错觉: checkbox和 radio 是没有文本的, 它后面 /前面的文字, 跟他是没有关系的, 所以如果用 $(":checkbox").text()
将只能得到空值, 同时, 要避免 :checkbox 跟 :checked的区别, 前者只是匹配 复选框这一种 只一种控件, 而:checked是匹配两种:checkbox 和 radio.
可以直接用dom元素 (不是jquery的对象) , 通过 点语法, 来访问获得 dom元素的 属性值. 也可以在js中, 通过 点语法设置 元素 的属性值. 访问属性时, 就不能给属性名 添加 引号了... 要访问属性, 平时就要注意元素标签 有哪些属性 ,属性 名称要记清楚, 如: width, height, className(采用驼峰表示法), bgcolor, background(图片), cols, rows, type, name, value....
- 要设置checkbox radio的值, 可以用 attr/prop来设置:
$("指定到具体的item id或class"). prop("checked", "checked")
val()方法函数 是用来 jquery 获取 "表单"元素 的值, 这是针对 "表单元素" 才有意义, 对非表单元素, 如p, div都没有意义. 默认的val()返回的数据类型是 string / array .(js的数据类型都是小写的, jquery表示数据类型都是首字母大写). 对非表单元素来说, 则是空的"" 字符串, 所以alert弹出窗口则是什么内容都没有.
speak: 演讲/发言; 说话等等意思. essay: 随笔, v. 尝试/试图= try. he essayed to (=try to) speak but was told to be quiet.
val函数的原型是 val([val|fn|arr]), 也就是说, 如果要获取元素的值, 则必须/只能是 空参数. 不能带参数. 要带参数, 都是用来设置表单元素的值的: val是设置input text文本域的值, fn也是返回设置文本域的函数, arr则是用来设置 select元素和 checkbox, radio元素的值的...
emmet采用了类似于css选择符的方式, 是 指 emmet的 html之间 可以采用"元素标签, 如p, div , 和 类.class, id如: #id的方式, 来表示html元素的方式 . 但是html标签本身是不能 简写的!! 如table, 你不能简写为 tb, span不能简写sp.....
简写的插件有两种, emmet和haml, haml: html abstractio markup language. 后者要安装python. E^N表示的是 E 的上一级元素(可以替代括号跟加号. 但是写法更简洁, 可以认为一个^跟一个> 正好抵消)...如:
// 这里的p.p2就是采用了^符号来表示.p2与.p1的层次级别相同
p.p1>(span>{click}+a[href=here$]{here}+{to continue}+br*2)*3^p.p2
将扩展成为:
<p class="p1">
<span>click<a href="here1">here</a>to continue<br><br></span>
<span>click<a href="here2">here</a>to continue<br><br></span>
<span>click<a href="here3">here</a>to continue<br><br></span>
</p>
<p class="p2"></p>
===============================================
.div>p.p1>(span>{click}+a[href=here$]{here}+{to continue}+br*2)*3^p.p2^.div2
将扩展成为:
<div class="div">
<p class="p1">
<span>click<a href="here1">here</a>to continue<br><br></span>
<span>click<a href="here2">here</a>to continue<br><br></span>
<span>click<a href="here3">here</a>to continue<br><br></span>
</p>
<p class="p2"></p>
</div>
<div class="div2"></div>
## 这里要注意的是, 你不要管有 几个 ^, 也不要管前面有多少个 ^, 你只需要记住, 每个^ 符号, 只看跟它紧挨着的 前面那个元素就好了,
是相对于 最邻近的 前面那个元素的层次 关系 向上提升几个层次. 所以这里, 最后的.div2 就是在 它前面的p.p2的基础上 提升了一个层级.
总之, emmet可以缩写/略写 ,简写 css的属性名, 如 border缩写为bd, padding 缩写为p等, 但是 html元素本身 是不可以 缩写的简写的!!
1. html有没有listbox元素标签?
没有专门的listbox元素标签, 但是通过select可以做出 类似listbox的效果. 了解亮点:
- select的属性, multiple表示是否可以多选, 它的值等于 multiple, multiple="multiple"就表示可以多选, 但这个并不是 "listbox"效果的根源
- 要产生listbox效果, 就是要让 select的option 不只是显示1个, 而是要显示多个 option! select 默认的只 显示一个 option, 其余的在"下拉框"中, 所以只要改变 select标签的 size属性, 比如让size=3, 4, 5, (默认的size=1, 表示可以直接显示的 选项的行数). 就可以看出listbox的效果了!
<select name="" id="" size="4">
<option value="">Lorem ipsum dolor.</option>
<option value="">Fuga quis aut.</option>
<option value="">Mollitia nemo ipsa.</option>
<option value="">Veniam sequi rerum!</option>
<option value="">Nisi repellendus accusantium.</option>
<option value="">Vero accusamus similique.</option>
</select>
========================================== ==
linux 的终端的位置 和 终端的大小, 是可以区分的:
- 如果出现一个手 形, 只有一个手形, 那么就是移动 终端窗口的 位置;
- 如果出现一个手形, 同时下面有一个数字相乘, 那么就是 调整 窗口的尺寸.
2. 前面说的是获得表单元素的值, 那么设置呢? 首先要把jquery关于val 的官方文档读懂, 发觉原来没有把官方文档读懂!
另外: 如果对 input type=text文本域 , 使用val(["first", "second"])这样的数组形式赋值, 将会把 数组作为一个整体看待, 把数组元素 用逗号连接起来进行设置 文本域的内容
还有一个很重要的概念: 在设置 checkbox, radio, select的哪些选项被选中时, 前面的 jquery对象元素, 一定不能是 $(":checked"), 因为最开始 的时候, 都没有设置, (你既然要去设置 哪些项将被 checked, 你都不知道哪些 当前已经被选中) , 那你怎么用 :checked呢? 应该用 $("input, 或者 select, 或者 :input, 或者:checkbox, 或者单独的 :radio") 然后去设置val([...]), 哪些选项被选中!!
input只能匹配input标签元素, 而:input则变了, 它表示的是一种类型, 所以他才是匹配form下的所有的表单元素, 包括: input, select, textarea, button.
$(":input").val();
可以设置 checkbox, radio, 和 select的选中选项.
jquery 获取和设置 checkbox radio 和 select option的值?的更多相关文章
- 获取或设置checkbox radio select的值
单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...
- jQuery 获取和设置type为hidden的input的值
HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- JQuery获取和设置select下拉框的值
获取Select : 获取select 选中的 text : $("#sid").find("option:selected").text(); 获取selec ...
- jquery 获取和设置 select下拉框的值(转手册)
##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...
- jquery 获取和设置 select下拉框的值
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...
随机推荐
- jdbc实现事务
//conn需要自己获取,这里我用的时springjdbcTemplate Connection conn = null; PreparedStatement pstm = null; try { c ...
- PHP Multipart/form-data remote dos Vulnerability
catalog . Description . Analysis 1. Description PHP is vulnerable to a remote denial of service, cau ...
- lua的corroutine学习
lua的corroutine学习 function receive (prod) local status, value = coroutine.resume(prod) return value e ...
- RabbitMQ代码第一步
Hello RabbitMQ 终于到了使用.Net连接RabbitMQ的时候了,我们首先新建一个控制台应用程序,在程序包管理控制器中NuGet中下载 RabbitMQ. Install-Package ...
- Tyvj P1175 机器人
P1175 机器人 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 设a,b是给定的正整数.现有一机器人沿着一个有n级的楼梯上下.机器人每上升一次,恰好上升a ...
- Mysql学习笔记(一)
技术的王国太过迷人,我刚从事IT就被各种技术所引诱迷惑,什么都想学.我还算言而有信的那一类人,还好有一丁点毅力,于是各种东西都沾染了一点.但是这种遍地开花的情况实在和我的智商不匹配.我没有那么多的精力 ...
- 日志模块logging使用心得
在应用程序使用中,日志输出对应用维护人员.开发人员判断程序的问题起重要作用. 那么在python中如何定义程序的日志输出? 推荐使用日志模块logging 需求:实现日志内容输出在文件中和控制器中 i ...
- easyUI layout 中使用tabs+iframe解决请求两次方法
demo中的事例在加载tab页面时是 function createFrame(url) { var s = '<iframe name="iframepanel" scro ...
- 9月23日JavaScript作业----日期时间选择
作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...
- 9月9日HTML上午表单元素2(框架、样式表)
五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...