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

要避免一种错觉:　ｃｈｅｃｋｂｏｘ和 radio 是没有文本的, 它后面 /前面的文字, 跟他是没有关系的, 所以如果用 $(":checkbox").text() 将只能得到空值, 同时, 要避免 :checkbox 跟 :checked的区别, 前者只是匹配 复选框这一种 只一种控件, 而:checked是匹配两种:ｃｈｅｃｋbox 和 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的选中选项.

posted @ 2016-10-06 22:13  noitanym  阅读(2309)  评论(0)  编辑  收藏  举报