js 全選 全不選 反選 提交 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
  <!–   引入jQuery –>
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
   $(function(){
      //全選 
      $("#CheckedAll").click(function(){
          $('[name=items]:checkbox').attr('checked', true);
      });
      //全不選 
      $("#CheckedNo").click(function(){
         $('[type=checkbox]:checkbox').attr('checked', false);
      });
      //反選 
      $("#CheckedRev").click(function(){
           $('[name=items]:checkbox').each(function(){
             //此處用JQ寫法頗顯囉嗦。體現不出JQ飄逸的感覺。 
             //$(this).attr("checked", !$(this).attr("checked")); 
             
             // www.aiwalls.com 直接使用JS原生代碼,簡單實用 
             this.checked=!this.checked;
           });
      });
      //輸出值 
     $("#send").click(function(){
         var str="你選中的是:\r\n";
         $('[name=items]:checkbox:checked').each(function(){
             str+=$(this).val()+"\r\n";
         })
         alert(str);
     });
   })
 
   </script>
 </head>
 <body>
 <form method="post" action="">
    你愛好的運動是?
    <br/>
     <input type="checkbox" name="items" value="足球"/>足球
     <input type="checkbox" name="items" value="籃球"/>籃球
     <input type="checkbox" name="items" value="羽毛球"/>羽毛球
     <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
     <input type="button" id="CheckedAll" value="全 選"/>
     <input type="button" id="CheckedNo" value="全不選"/>
     <input type="button" id="CheckedRev" value="反 選"/> 
 
     <input type="button" id="send" value="提 交"/> 
 </form>
 </body>
 </html>
 
 摘自chaojie2009的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *