javascript實作複選框選取屬性_javascript技巧

熟悉web前端開發的人都知道，判斷複選框是否選中是經常做的事情，判斷的方法很多，但是開發過程中常常忽略了這些方法的兼容性，而是實現效果就好了。部落客之前用戶不少方法，常常Google到一些這個不好那個不好的文章，到後面自己都混亂了。今天偶然看到一篇外國的博客，覺得講解的很不錯，打算翻譯成中文，並加上了一些自己的見解。

如果你從事web開發並且在你開發的網頁中有複選框，你可能需要判斷當前該複選框是否選中，進而執行一些條件語句。有很多種方法來判斷一個複選框是否選取。

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

我們來看一個例子，在你的頁面上面有一個複選框並且該複選框有著唯一的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標籤。

[/code]
    $('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');
        }
    });
[/code]

使用 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屬性集的輸入框：

複製程式碼 程式碼如下:

   

然後在JQuery程式碼裡我們這樣寫：

複製程式碼 程式碼如下:

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

我們會發現，透過prop()來取得輸入框裡面的值永遠都是跟它裡面的值同步的，而透過attr()老去取得輸入框裡面的值一直都是在html標籤裡面設定的值。

複製程式碼 程式碼如下:

$('input[type="button"]').click(function () {
    alert('Attribute Value is : ' $('#myTextBox').attr('value'));
    alert('Property Value is : ' $('#myTextBox').prop('value'));
});

使用 filter :checked

    var isChecked = $('#myCheckBox:checked').length > 0;
另外一種用來判斷這個屬性的值的方法是在選擇元素的時候加上一個過濾器 :checked，然後根據所得到的元素的長度來判斷元素的屬性。但是這種用法並不推薦，因為當你的頁面上有很多群組複選框並且使用class選擇器而不是id選擇器的時候，所得到的答案可能是錯誤的。

複製程式碼 程式碼如下:

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

我們能夠看到，我們有好幾種方法來獲得複選款的選取屬性。這也正是web開發者經常需要用到並且在選擇正確的使用方式時產生困惑的地方。

以上所述就是本文的全部內容了，希望對大家學習javascript能夠有所幫助。

請您花一點時間將文章分享給您的朋友或留下評論。我們將由衷感謝您的支持！