TShopping

標題: JQUERY複選CHECKBOX 全選 取消全選 [打印本頁]
作者: woff    時間: 2012-12-27 19:30
標題: JQUERY複選CHECKBOX 全選 取消全選
用JQUERY實現全選和取消全選,減少了我們寫JS的麻煩,我們再也不用寫那麼多代碼了,給大家分享兩段代碼,用JQUERY實現復選框的全選和取消全選.



  2. <script type="text/javascript">
  3. $(function() {
  4. $("#checkall").click(function() {
  5. $("input[@name='checkname[]']").each(function() {
  6. $(this).attr("checked", true);
  7. });
  8. });
  9. $("#delcheckall").click(function() {
  10. $("input[@name='checkname[]']").each(function() {
  11. $(this).attr("checked", false);
  12. });
  13. });
  14. });
  15. </script>
  16. <input type='checkbox' id='id1' name='checkname[]' value='1' />value1
  17. <input type='checkbox' id='id2' name='checkname[]' value='2' />value2
  18. <input type='checkbox' id='id3' name='checkname[]' value='3' />value3
  19. <input type="button" id="checkall" name="checkall" value="全選" />
  20. <input type="button" id="delcheckall" name="delcheckall" value="取消全選" />
複製代碼

更加簡單的一種:



  2. $("#checkall").click(
  3. function(){
  4. if(this.checked){
  5. $("input[name='checkname']").each(function(){this.checked=true;});
  6. }else{
  7. $("input[name='checkname']").each(function(){this.checked=false;});
  8. }
  9. }
  10. );
複製代碼





歡迎光臨 TShopping (http://www.tshopping.com.tw/) Powered by Discuz! X3.2