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

一、復選框

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

注意，input標簽要放在label標簽內，這樣點擊文字時也會有反映。

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

同樣利用prop方法可以通過js代碼來選中或取消選中復選框。

二、單選按鈕

1、基本概念

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

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

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

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

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

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

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

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

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

3、 對于一組按鈕，獲取被選中的按鈕

單選按鈕的應用場景是在一組按鈕中獲取或設置被選中的按鈕。這樣首先要為每個按鈕設置一個標記。通常是設置按鈕的value屬性。value屬性的值就代表了這個按鈕。

<form>

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

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

</form>

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

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

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

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

注意，value屬性和 checked屬性含義完全不同。Checked屬性代表按鈕的是否被選中的狀態(tài)。而value屬性只是按鈕的一個屬性，與是否選中無關，往往用來標識一個按鈕。

4、通過value屬性獲取相應的按鈕

利用jquery的屬性選擇器，可以獲取對應value屬性值的按鈕。獲取到按鈕后，就可以設置按鈕的選中狀態(tà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的復選框

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。