快捷導(dǎo)航

javascript實(shí)現(xiàn)復(fù)選框選中屬性

更新時(shí)間：2015年03月25日 11:18:57 投稿：hebedich

本文給大家介紹的是一篇國(guó)外網(wǎng)友寫的博客，講解的是關(guān)于實(shí)現(xiàn)復(fù)選框選中屬性的問(wèn)題，感覺(jué)非常不錯(cuò)，翻譯過(guò)來(lái)推薦給大家，希望小伙伴們能夠喜歡。

熟悉web前端開(kāi)發(fā)的人都知道，判斷復(fù)選框是否選中是經(jīng)常做的事情，判斷的方法很多，但是開(kāi)發(fā)過(guò)程中常常忽略了這些方法的兼容性，而是實(shí)現(xiàn)效果就好了。博主之前用戶不少方法，經(jīng)常Google到一些這個(gè)不好那個(gè)不好的文章，到后面自己都混亂了。今天偶然看到一篇外國(guó)的博客，覺(jué)得講解的很不錯(cuò)，打算翻譯成中文，并加上了一些自己的見(jiàn)解。

如果你從事web開(kāi)發(fā)并且在你開(kāi)發(fā)的網(wǎng)頁(yè)中有復(fù)選框，你可能需要判斷當(dāng)前該復(fù)選框是否選中，進(jìn)而執(zhí)行一些條件語(yǔ)句。有很多種方法來(lái)判斷一個(gè)復(fù)選框是否選中。

讓我們先來(lái)看看原生的javascript是怎么判斷這個(gè)屬性的。在javascript中，在你選中了某個(gè)元素之后，你可以輕易地通過(guò)該元素的checked屬性來(lái)判斷你選中的復(fù)選框是否選中了。

我們來(lái)看一個(gè)例子，在你的頁(yè)面上面有一個(gè)復(fù)選框并且該復(fù)選框有著唯一的id，比如myCheckBox ，如下面所示：

復(fù)制代碼代碼如下:

現(xiàn)在我們首先通過(guò)javascript來(lái)選中這個(gè)元素然后獲取它的checked屬性。

復(fù)制代碼代碼如下:

    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');

        }

    }

可以看到，我們先通過(guò)id選中了這個(gè)元素然后判斷它的checked屬性，如果復(fù)選框選中了，它的值是true，如果復(fù)選框沒(méi)有選中，它的值將是false。

如果你使用的是jQuery并且你不想用原生的javascript來(lái)進(jìn)行這個(gè)判斷，方法有很多：

使用 is(':checked')

這個(gè)用法中你將使用jQuery的 is()函數(shù)。這個(gè)函數(shù)的功能是判斷選中的元素或者元素集合是否滿足你傳遞給該函數(shù)的條件參數(shù)，如果條件符合，返回true，否則返回false。

所以為了使用這個(gè)函數(shù)，我們需要選中元素然后檢測(cè)選擇器:checked 的值，這個(gè)選擇器適用于復(fù)選框、單選按鈕和select標(biāo)簽。

[/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之前，函數(shù)attr()用來(lái)獲取元素的property 和attributes，但是非常容易讓人產(chǎn)生疑惑。所以jQuery1.6之后，一個(gè)新的函數(shù)prop()來(lái)獲取元素的當(dāng)前的property值。

但是在這之前，我們首先需要弄明白property 和attributes的區(qū)別。attributes是你給HTML標(biāo)簽設(shè)置的一些屬性值，這包括你給一個(gè)標(biāo)簽設(shè)置的class、id甚至給輸入框設(shè)定初始值一樣。如果你沒(méi)有在標(biāo)簽里面設(shè)置屬性值但是卻通過(guò)attr()來(lái)獲取屬性值，　　會(huì)出現(xiàn)undefined的情況。prop()同樣是用來(lái)獲取元素的屬性值，但是與attr()有著明顯的區(qū)別的是，即便沒(méi)有在html標(biāo)簽中定義想要獲取的屬性，也能夠正確的返回需要的當(dāng)前的屬性值。

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

為了直觀的體現(xiàn)兩者之間的差別，你可以再頁(yè)面加載完成之后立即改變輸入框的值，這時(shí)候你就會(huì)發(fā)現(xiàn)即便是你的輸入框的值變化了，用attr()獲取的屬性值并不會(huì)隨著文本的改變而改變，而通過(guò)property()來(lái)獲取的屬性值會(huì)隨著文本框內(nèi)容的變化而變化。

看一個(gè)例子，這里我們有一個(gè)設(shè)置了初始值的和一些attribute屬性集的輸入框：

復(fù)制代碼代碼如下:

然后在JQuery代碼里我們這樣寫：

復(fù)制代碼代碼如下:

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

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

我們會(huì)發(fā)現(xiàn)，通過(guò)prop()來(lái)獲取輸入框里面的值永遠(yuǎn)都是和它里面的值同步的，而通過(guò)attr()老獲取輸入框里面的值一直都是在html標(biāo)簽里面設(shè)置的值。

復(fù)制代碼代碼如下:

$('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;
另外一種用于判斷這個(gè)屬性的值的方法是在選擇元素的時(shí)候加上一個(gè)過(guò)濾器 :checked，然后根據(jù)所獲得的元素的長(zhǎng)度來(lái)判斷元素的屬性。但是這種用法并不推薦，因?yàn)楫?dāng)你的頁(yè)面上有很多組復(fù)選框并且使用class選擇器而不是id選擇器的時(shí)候，所得到的答案可能是錯(cuò)誤的。

復(fù)制代碼代碼如下:

$('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');

    }

});

我們能夠看到，我們有好幾種方法來(lái)獲得復(fù)選款的選中屬性。這也恰恰是web開(kāi)發(fā)者經(jīng)常需要用到并且在選擇正確的使用方式時(shí)產(chǎn)生困惑的地方。

以上所述就是本文的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)javascript能夠有所幫助。

請(qǐng)您花一點(diǎn)時(shí)間將文章分享給您的朋友或者留下評(píng)論。我們將會(huì)由衷感謝您的支持！

您可能感興趣的文章: