checkbox是Web開發中經常用到的表單控件,它可以讓用戶對一系列選項進行單選或多選。在網頁中使用jQuery可以更方便地對checkbox進行判斷及操作。
首先,在HTML代碼中需要建立一組checkbox,例如:
<input type="checkbox" name="option1" value="1">選項1</input> <input type="checkbox" name="option2" value="2">選項2</input> <input type="checkbox" name="option3" value="3">選項3</input>
接下來,在jQuery代碼中可以使用attr()方法來遍歷每個checkbox,獲取其選中狀態,例如:
$('input[type="checkbox"]').each(function() { if ($(this).is(':checked')) { //判斷checkbox是否選中 var optionValue = $(this).attr('value'); alert('您選擇了選項' + optionValue); } });
以上代碼可以輸出用戶選擇的選項及其對應的值。
除了判斷checkbox是否選中,我們還可以通過jQuery代碼來改變checkbox的選中狀態,例如:
$('#selectAll').click(function() { $('input[type="checkbox"]').prop('checked', true); //將所有checkbox設置為選中狀態 }); $('#deselectAll').click(function() { $('input[type="checkbox"]').prop('checked', false); //將所有checkbox取消選中狀態 });
以上代碼中,我們分別建立了兩個按鈕來實現全選和取消全選的功能,點擊按鈕時可以使用prop()方法改變checkbox的選中狀態。