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的选中选项.