javascript實現復選框選中屬性_javascript技巧

如果你從事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能夠有所幫助。

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com