使用jquery怎么操作checkbox?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
做系統的過程中,與checkbox 復選框打交道,是難免的,而且在每個系統中,簡直是必不可少的一道菜,通常的操作有一下幾種:
1.用jquery 全部選擇checkbox
2.用jquery 全部取消checkbox
3.用jquery 實現checkbox 反選
4.用jquery 獲取所有已選擇checkbox的值。
現在將這些常用的操作總結在一個例子中,方便以后查詢,不愿意看代碼的,也可以下載源碼運行測試。
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>yihaomen.com jquery checkbox 測試</title> <link rel="stylesheet" type="text/css" href="/static/css/global.css" rel="external nofollow" > <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { /*全選或全不選*/ $("#controlall").click(function() { $('input[name="selectdivision"]').attr("checked",this.checked); }); var $subBox = $("input[name='selectdivision']"); $subBox.click(function(){ $("#controlall").attr("checked",$subBox.length == $("input[name='selectdivision']:checked").length ? true : false); }); /*反選*/ var reverseBtn=$('#reverseselect'); reverseBtn.click(function(){ $("[name='selectdivision']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked",'true'); } }) }); /*得到所有值*/ var getvalueBtn=$('#getValButton'); getvalueBtn.click(function(){ var val_array=[]; $("input:checkbox[name=selectdivision]:checked").each(function(){ val_array.push(parseInt($(this).val())); }); alert(val_array.join()); }); }); </script> </head> <body> <div> <table class="crmgrid_popwindow" id="division_table"> <tr > <td><input type="checkbox" id="controlall" name="controlall" />全選/全不選</td> <td> <input type="button" id="reverseselect" value="反選" /> <input type="button" id="getValButton" value="得到選擇的值" /> </td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="1"/></td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="2"/></td> <td>2</td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="3"/></td> <td>3</td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="4"/></td> <td>4</td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="5"/></td> <td>5</td> </tr> <tr> <td><input type="checkbox" name="selectdivision" value="6"/></td> <td>6</td> </tr> </table> </div> </body> </html>
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發網站。
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。