在上面文章的基礎(chǔ)上，我們介紹如何操作表單元素中的 復(fù)選框和單選框。

一、復(fù)選框

<label> <input type="checkbox" id="item" checked> 全選</label>

注意，input標(biāo)簽要放在label標(biāo)簽內(nèi)，這樣點(diǎn)擊文字時(shí)也會(huì)有反映。

如果選中了，調(diào)用 $("#item").prop("checked")返回true，否則返回false

同樣利用prop方法可以通過(guò)js代碼來(lái)選中或取消選中復(fù)選框。

二、單選按鈕

1、基本概念

<label><input type="radio" >男</label>

<label><input type="radio" >女</label>

上面給出了2個(gè)單選按鈕。但發(fā)現(xiàn)他們兩個(gè)同時(shí)都能選，這個(gè)與單選按鈕的使用場(chǎng)景不符。可以給它們?cè)O(shè)置相同的name屬性，這樣他們就會(huì)被看成是一組的，選中狀態(tài)會(huì)互斥。如下面的方式：

<label><input type="radio" name="sex">男</label>

<label><input type="radio" name="sex">女</label>

注意，這個(gè)互斥也只是指在同一個(gè)form下。不同的form下的單選按鈕，即使name值相同，也不會(huì)互斥。

2、獲取單個(gè)按鈕的選中狀態(tài)

<label><input type="radio" id="item" name="sex">男</label>

$("#item").prop("checked")

3、 對(duì)于一組按鈕，獲取被選中的按鈕

單選按鈕的應(yīng)用場(chǎng)景是在一組按鈕中獲取或設(shè)置被選中的按鈕。這樣首先要為每個(gè)按鈕設(shè)置一個(gè)標(biāo)記。通常是設(shè)置按鈕的value屬性。value屬性的值就代表了這個(gè)按鈕。

<form>

<label><input type="radio" name="sex" value="man">男</label>

<label><input type="radio" name="sex" value="womon">女</label>

</form>

這時(shí)，需要給每個(gè)radio設(shè)置一個(gè)不同的value，以便于知道哪個(gè)被選中了。

var obj = $("form input:checked"); //獲取被選中的按鈕

alert(obj.val()); //val方法返回被選中按鈕的value屬性值

可以連在一起 $("form input:checked").val() //獲取被選中按鈕的value屬性值

注意，value屬性和 checked屬性含義完全不同。Checked屬性代表按鈕的是否被選中的狀態(tài)。而value屬性只是按鈕的一個(gè)屬性，與是否選中無(wú)關(guān)，往往用來(lái)標(biāo)識(shí)一個(gè)按鈕。

4、通過(guò)value屬性獲取相應(yīng)的按鈕

利用jquery的屬性選擇器，可以獲取對(duì)應(yīng)value屬性值的按鈕。獲取到按鈕后，就可以設(shè)置按鈕的選中狀態(tài)了。

這個(gè)場(chǎng)景經(jīng)常遇到。比如根據(jù)服務(wù)器獲取的信息，來(lái)初始化按鈕的選中狀態(tài)。代碼如：

<form>

<label><input type="radio" value="man">男</label>

<label><input type="radio" value="womon">女</label>

</form>

代碼如下

var obj = $("input[value='man']"); //獲取value屬性值為man的復(fù)選框

alert(obj.prop("checked")); //獲取是否被選中

ob.prop("checked",true) //選中該單選按鈕

可以看出，利用value屬性和checked屬性的結(jié)合，可以完成對(duì)單選按鈕組的各種操作。

總結(jié)

以上是生活随笔為你收集整理的Jquery学习笔记：操作form表单元素之二（复选框和单选框）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。