资源库 全选反选

app/views/users/_resources_list.html.erb

@@ -3,7 +3,7 @@
     <% attachments.each do |attach| %>
     <ul class="resourcesList">
       <li class="resourcesListCheckbox fl">
-        <input name="checkbox1" type="checkbox" class="resourcesCheckbox" />
+        <input name="checkbox1" type="checkbox" onclick="checkAllBox($(this));" class="resourcesCheckbox" />
       </li>
     <li class="resourcesListName fl">
       <!--<a href="javascript:void(0);" class="resourcesBlack"><%#=truncate(attach.filename,:length=>18)%></a>-->

app/views/users/user_resource.html.erb

@@ -87,12 +87,12 @@
   </div>
   <div class="resourcesListOption">
     <div class="resourcesCheckAll">
-      <input id="checkboxAll" type="checkbox" value="" class="resourcesCheckbox" />
+      <input id="checkboxAll" type="checkbox" value=""  class="resourcesCheckbox" />
     </div>
     <a href="javascript:void(0);" class="replyGrey mr15">全选</a>
     <a href="javascript:void(0);" class="replyGrey">删除</a>
     <div class="resourcesSelectSend">
-      <div class="fl">选择&nbsp;<span class="c_red">10</span>&nbsp;个资源</div>
+      <div class="fl">选择&nbsp;<span class="c_red" id="res_count">0</span>&nbsp;个资源</div>
       <div class="resourcesSelectSendButton">
         <a href="javascript:void(0);" class="c_blue db">发送</a>
       </div>
@@ -179,6 +179,72 @@ $(".resourcesList").click(function(e) {
        }
         line = null;
 });
+  //只要有一个选中了就是true
+  function checkboxSelected(){
+      selected = false;
+      $("#resources_list").find("input[name='checkbox1']").each(function(){
+          if($(this).attr('checked') == true){
+              selected = true;
+          }
+      });
+      return selected;
+  }
+  //只有全选才是true
+  function checkboxAllSelected(){
+      allSelected = true;
+      $("#resources_list").find("input[name='checkbox1']").each(function(){
+          if($(this).attr('checked') == undefined){
+              allSelected = false;
+          }
+      });
+      return allSelected;
+  }
+  //只有全部不选才是true
+  function checkboxAllDeselected(){
+      allDeselected = true;
+      $("#resources_list").find("input[name='checkbox1']").each(function(){
+          if($(this).attr('checked') == 'checked'){
+              allDeselected = false;
+          }
+      });
+      return allDeselected;
+  }
+  //查看所有的checkbox状态，并且按情况更改$("#checkboxAll")的状态
+  function checkAllBox(checkbox){
+    //只有选中当前checkbox且这个时候所有的checkbox都被选中了，$("#checkboxAll")才是被选中状态，其余都是非选中状态
+    if(checkbox.attr('checked') == 'checked' && checkboxAllSelected()){
+        $("#checkboxAll").attr('checked',true);
+    }else{
+        $("#checkboxAll").attr('checked',false);
+    }
+    $("#res_count").html(getCheckBoxSeletedCount());
+
+  }
+  //获取当前checkbox选中的数目
+  function getCheckBoxSeletedCount(){
+      var i = 0;
+      $("#resources_list").find("input[name='checkbox1']").each(function(){
+          if($(this).attr('checked') == 'checked'){
+              i ++;
+          }
+      });
+      return i;
+  }
+  $("#checkboxAll").click(function(e){
+
+      if($(this).attr('checked')){
+          $("#resources_list").find("input[name='checkbox1']").each(function(){
+              $(this).attr('checked',true);
+          });
+          $("#res_count").html('<%= @attachments.size%>');
+      }else{
+          $("#resources_list").find("input[name='checkbox1']").each(function(){
+              $(this).attr('checked',false);
+          });
+          $("#res_count").html(0);
+      }
+  });
+
   function show_send(){
       $("#contextMenu").hide();
       document.oncontextmenu = function() {return true;}