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的選中選項.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM