這次帶給大家checkbox在jQuery中的使用,checkbox在jQuery中使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
這篇文章主要介紹了jQuery實現checkbox的簡單操作,對複選框組的全選、全不選、不全選,具有一定的參考價值,感興趣的小夥伴可以參考一下
對複選框組的全選、全不選、不全選,取得選取的複選框的值的操作
1.點選全選按鈕,複選框組全部選取或全部取消。
2.實現全選按鈕和複選框組的聯動,當複選框組中有一個沒有被選中後,那麼id='checkedAll'的全選按鈕應該要取消選中;當複選框組全部選取後,全選按鈕也應該被選取。
3.取得已選取的複選框的值。
程式碼:
nbsp;html> <meta> <title>对复选框组的全选操作</title> <script></script> <script> $(function(){ /*全选 全选cheched和下方的checkbox按钮的checked是一致的, 故可用this.checked。 注意:$(this).checked是错的 */ $('#checkedAll').click(function() { $('[name=item]:checkbox').prop('checked', this.checked); }); /*判断复选框的总数,是否和选中的复选框的数量相等 相等:全选了 不相等:没有全选 */ $('[name=item]:checkbox').click(function() { /*得到的是ul下 name=item 的复选框数组*/ var $checkedArray = $('[name=item]:checkbox'); /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */ $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length); }); }); </script> <script> $(function () { //获取已选的复选框的值 var checkedArray = new Array();//放已经选择的checkbox的value var count;//已经选择的个数 $('#btn_submit').click(function() { checkedArray.length=0; count=0; $('[name=item]:checkbox:checked').each(function() { checkedArray.push($(this).val()); count++; }); if (checkedArray.length==0) { alert("Please check one at least."); return; } confirm("已选复选框的值:"+checkedArray+"\n"+"选中的复选框个数:"+count); }); }) </script>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是checkbox在jQuery的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!