============== 获取和设置 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的值?的更多相关文章

  1. 获取或设置checkbox radio select的值

    单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...

  2. jQuery 获取和设置type为hidden的input的值

    HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...

  3. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  4. JQuery获取与设置HTML元素的值value

    JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...

  5. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  6. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  7. JQuery获取和设置select下拉框的值

    获取Select : 获取select 选中的 text : $("#sid").find("option:selected").text(); 获取selec ...

  8. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

  9. jquery 获取和设置 select下拉框的值

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

随机推荐

  1. Access restriction: The type 'BASE64Encoder' is not API

    问题的原因好像是这个方法不是安全的,所以不推荐使用,我是在做毕设时要用到的所以就直接用了(毕设要求没有那么严格的要求)

  2. java integer对象判断两个数字是否相等

    java integer对象判断两个数字是否相等,不一定对 问题发生的背景:javaweb的项目,起先,因为在java中实体类中的int类型在对象初始化之后会给int类型的数据默认赋值为0,这样在很多 ...

  3. BZOJ2120 数颜色(带修改莫队)

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. 前端打包/自动化构建工具:gulp

    glup可以进行打包,并且可以实现类似/script/test-adsf123.js或者/script/test.js?v=asdf123 参考: http://www.ydcss.com/archi ...

  5. [NOIP2012] 提高组 洛谷P1082 同余方程

    题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输出只有一行,包含一个正 ...

  6. BROOTKIT Pinciple、Code Analysis(undone)

    目录 . Rootkit相关知识 . BROOTKIT源码分析 . 关键技术点 . 防御策略 1. Rootkit相关知识 关于rootkit的相关其他知识,请参阅以下文章 http://www.cn ...

  7. java+tomcat(apr,native)

    #pdd 2014_12-24#安装java环境rpm -ivh jdk-7u72-linux-x64.rpm vim /etc/profile #set for java export JAVA_H ...

  8. Centos下 为Firefox安装Flash插件

    方法一: 直接到官网去下载RPM格式的安装包,下载好后直接 用 rpm -ivh XXXX.rpm 来安装即可. 方法二: 到官网下载tar.gz格式的,自己配置安装: #wget http://fp ...

  9. CentOS彻底卸载wine

    说明:折腾啊折腾,装了卸,卸了装,哈哈. 1. 卸载wine及相关组件 yum remove wine* 2. 删除相关文件 ~/.wine ~/.local/share/applications / ...

  10. python print输出unicode字符

    命令行提示符下,python print输出unicode字符时出现以下 UnicodeEncodeError: 'gbk' codec can't encode character '\u30fb ...