1、實現全選/所有選/反選按鈕功能

時間 2019-12-08

標籤實現全選所有按鈕功能简体版

原文原文鏈接

1、效果演示

請選擇你所掌握的語言：javascript

全選/全不選
Java JavaScript php Python
php

2、源碼展現

 <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>

3、總結

$(this)：表明當前對象。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。