JQuery是一個廣泛使用的JavaScript庫,有很多內置的方法可以幫助開發者更容易地操作網頁上的元素。在JQuery中,全選input框是一個非常常見的操作之一。下面將介紹如何在JQuery中使用input 全選功能。
<input type="checkbox" id="selectAll"> <input type="checkbox" id="option1"> <input type="checkbox" id="option2"> <input type="checkbox" id="option3"> <input type="checkbox" id="option4">
首先,在HTML文件中引入JQuery庫:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
然后,在JavaScript文件中寫入以下代碼:
$('document').ready(function(){ $('#selectAll').click(function(){ $('input:checkbox').prop('checked', this.checked); }); });
這段代碼的含義是,當全選input框被點擊時,將所有checkbox的checked屬性設置為true或false。
此時,在頁面上勾選全選框,就會選中所有的選項框。取消全選框,則會取消所有的選項框的選擇狀態。
使用JQuery提供的全選input功能,可以大大提升網頁交互的方便性和用戶體驗。
上一篇dockerjdk鏡像
下一篇純css 搜索欄隱藏