一、實現全選/全部選/反選按鈕功能


一、效果演示

請選擇你所掌握的語言:

全選/全不選
Java JavaScript php Python

二、源碼展示

 <script type="application/javascript">
          $().ready(function(){
              //選擇所有的input類型為checkbox且name="items",通過attr改變其checked屬性
              $("#checkItems").click(function(){
                  if($(this).attr("checked")){
                      $(":checkbox[name='items']").attr("checked",true);
                  }else{
                      $(":checkbox[name='items']").attr("checked",false);
                  }
              });
              //選擇所有的input類型為checkbox且name="items",遍歷每一項將其取反
              $("#check_reversal").click(function(){
                  $(":checkbox[name='items']").each(function(){
                      if($(this).attr("checked")){
                          $(this).attr("checked",false);
                      }else{
                          $(this).attr("checked",true)
                      }
                  });
              });
          });
  </script>
  <body>
      請選擇你所掌握的語言:
       <br>
     <input type="checkbox" name="checkItems"  id="checkItems" value="全選/全不選"/>全選/全不選
     <br/>
        <input type="checkbox" name="items" value="Java" />Java
        <input type="checkbox" name="items" value="JavaScript"/>JavaScript
        <input type="checkbox" name="items" value="php"/>php
        <input type="checkbox" name="items" value="Python"/>Python
        <br/>
        <input type="button" name="checkall" id="check_reversal" value="反選" />
  </body>

三、總結

$(this):代表當前對象。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM