在網頁中,常常需要使用復選框組,比如多選題、復選框選擇等。使用jQuery可以使復選框組的操作更為簡單方便。以下是一個簡單的jQuery復選框組例子:
<!-- HTML代碼 --> <div id="checkbox-group"> <label><input type="checkbox" name="checkbox1">選項1</label> <label><input type="checkbox" name="checkbox2">選項2</label> <label><input type="checkbox" name="checkbox3">選項3</label> </div> <!-- jQuery代碼 --> <script> $(document).ready(function(){ $('#checkbox-group input[type="checkbox"]').change(function(){ var checkedCheckboxes = $('#checkbox-group input[type="checkbox"]:checked'); if(checkedCheckboxes.length === 0){ alert('請至少選擇一項'); $(this).prop('checked', true); //如果沒有選中項,則強制選中當前點擊的 } else if(checkedCheckboxes.length >2){ alert('最多只能選擇兩項'); $(this).prop('checked', false); //如果選中項超過兩項,則取消當前點擊的選中狀態 } }); }); </script>
上述例子中,我們使用了jQuery選擇器來選中復選框組中的所有復選框,然后為它們綁定了一個change事件,在事件處理函數中,我們通過變量checkedCheckboxes獲取了當前選中的復選框,然后根據選中個數進行相應的操作。這個例子演示了如何限制復選框組的選中個數以及無法取消選擇的情況。
下一篇mysql一般連接方式