jQuery的checkbox事件非常強(qiáng)大,可以用于監(jiān)聽用戶對(duì)復(fù)選框的選擇或取消選擇,進(jìn)而執(zhí)行對(duì)應(yīng)的操作。下面我們?cè)敿?xì)介紹一下如何通過jQuery來監(jiān)聽復(fù)選框的狀態(tài)變化。
//當(dāng)復(fù)選框的選中狀態(tài)發(fā)生變化時(shí),會(huì)觸發(fā)change事件
$(document).on('change', 'input[type="checkbox"]', function(){
//獲取當(dāng)前復(fù)選框的選中狀態(tài)
var isChecked = $(this).prop('checked');
//根據(jù)isChecked的值,執(zhí)行不同的操作
if(isChecked){
//選中狀態(tài)
console.log('此復(fù)選框被選中');
}else{
//未選中狀態(tài)
console.log('此復(fù)選框被取消選中');
}
});
以上代碼展示了通過on方法來監(jiān)聽所有的復(fù)選框的change事件,然后根據(jù)復(fù)選框的選中狀態(tài)執(zhí)行不同的操作。我們也可以將監(jiān)聽事件綁定到某個(gè)具體的復(fù)選框,只需簡單修改代碼即可:
//綁定到某個(gè)具體的復(fù)選框上
$('#myCheckbox').on('change', function(){
//獲取當(dāng)前復(fù)選框的選中狀態(tài)
var isChecked = $(this).prop('checked');
//根據(jù)isChecked的值,執(zhí)行不同的操作
if(isChecked){
//選中狀態(tài)
console.log('此復(fù)選框被選中');
}else{
//未選中狀態(tài)
console.log('此復(fù)選框被取消選中');
}
});
通過上述代碼的演示,我們可以看出jQuery的checkbox事件實(shí)現(xiàn)非常簡單,只需幾行代碼就可以實(shí)現(xiàn)對(duì)復(fù)選框的監(jiān)聽和操作,方便實(shí)用。