Web前端之複選框選中屬性

熟悉web前端開發的人都知道，判斷複選框是否選中是常常作的事情，判斷的方法不少，可是開發過程當中經常忽略了這些方法的兼容性，而是實現效果就行了。博主以前用戶很多方法，常常Google到一些這個很差那個很差的文章，到後面本身都混亂了。今天偶然看到一篇外國的博客，以爲講解的很不錯，打算翻譯成中文，並加上了一些本身的看法。翻譯的目的一是分享給你們，二是方便本身查閱。原文連接是：http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html。

若是你從事web開發而且在你開發的網頁中有複選框，你可能須要判斷當前該複選框是否選中，進而執行一些條件語句。有不少種方法來判斷一個複選框是否選中。

讓咱們先來看看原生的javascript是怎麼判斷這個屬性的。在javascript中，在你選中了某個元素以後，你能夠輕易地經過該元素的checked屬性來判斷你選中的複選框是否選中了。

咱們來看一個例子，在你的頁面上面有一個複選框而且該複選框有着惟一的id，好比myCheckBox ，以下面所示：

1 <input type="checkbox" id="myCheckBox"/>

如今咱們首先經過javascript來選中這個元素而後獲取它的checked屬性。

function checkCheckBox() {
        if (document.getElementById('myCheckBox').checked) {
            //change it to alert('Its Checked'); if you not working with console
            console.log('Its Checked');
        } else {
            console.log('No its not Checked');
        }
    }

能夠看到，咱們先經過id選中了這個元素而後判斷它的checked屬性，若是複選框選中了，它的值是true，若是複選框沒有選中，它的值將是false。點擊查看該例子。

若是你使用的是jQuery而且你不想用原生的javascript來進行這個判斷，方法有不少：

使用 is(':checked')

這個用法中你將使用jQuery的 is()函數。這個函數的功能是判斷選中的元素或者元素集合是否知足你傳遞給該函數的條件參數，若是條件符合，返回true，不然返回false。

因此爲了使用這個函數，咱們須要選中元素而後檢測選擇器:checked 的值，這個選擇器適用於複選框、單選按鈕和select標籤。 點擊查看該例子

$('input[type="button"]').click(function () {
        if ($('#myCheckBox').is(':checked')) {
            //change it to alert('Its Checked'); if you not working with console
            console.log('Its Checked');
        } else {
            console.log('No its not Checked');
        }
    });

使用 prop()

在jQuery1.6以前，函數attr()用來獲取元素的property 和attributes，可是很是容易讓人產生疑惑。因此jQuery1.6以後，一個新的函數prop()來獲取元素的當前的property值。

可是在這以前，咱們首先須要弄明白property 和attributes的區別。attributes是你給HTML標籤設置的一些屬性值，這包括你給一個標籤設置的class、id甚至給輸入框設定初始值同樣。若是你沒有在標籤裏面設置屬性值可是卻經過attr()來獲取屬性值，　　會出現undefined的狀況。prop()一樣是用來獲取元素的屬性值，可是與attr()有着明顯的區別的是，即使沒有在html標籤中定義想要獲取的屬性，也可以正確的返回須要的當前的屬性值。

根據官方的建議：具備 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其餘的使用 attr()。

爲了直觀的體現二者之間的差異，你能夠再頁面加載完成以後當即改變輸入框的值，這時候你就會發現即使是你的輸入框的值變化了，用attr()獲取的屬性值並不會隨着文本的改變而改變，而經過property()來獲取的屬性值會隨着文本框內容的變化而變化。

看一個例子，這裏咱們有一個設置了初始值的和一些attribute屬性集的輸入框：

<input type="text" id="myTextBox" value='set attribute value' />

而後在JQuery代碼裏咱們這樣寫：

console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
    console.log('Property Value is : '+$('#myTextBox').prop('value'));

咱們會發現，經過prop()來獲取輸入框裏面的值永遠都是和它裏面的值同步的，而經過attr()老獲取輸入框裏面的值一直都是在html標籤裏面設置的值。 點擊查看該例子

使用 filter :checked

var isChecked = $('#myCheckBox:checked').length > 0;

另一種用於判斷這個屬性的值的方法是在選擇元素的時候加上一個過濾器 :checked，而後根據所得到的元素的長度來判斷元素的屬性。可是這種用法並不推薦，由於當你的頁面上有不少組複選框而且使用class選擇器而不是id選擇器的時候，所獲得的答案多是錯誤的。 點擊查看該例子

咱們可以看到，咱們有好幾種方法來得到複選款的選中屬性。這也偏偏是web開發者常常須要用到而且在選擇正確的使用方式時產生困惑的地方。