jquery处理复选框

项目中操作checkbox是经常碰到的，有了jquery后操作起来简单明了,代码如下：

Js代码   

1. $( function() {  
2.   
3.     //全选  
4.     $("#selectAll").click( function() {  
5.         $("input[name='send-mail']").each( function() {  
6.             $(this).attr("checked", true);  
7.         });  
8.     });  
9.     // 反选  
10.     $("#inverseAll").click( function() {  
11.         $('input[name="send-mail"]').each( function() {  
12.             $(this).attr("checked", !$(this).attr("checked"));  
13.         });  
14.     });  
15.   
16.     // 取消全部  
17.     $("#deselectAll").click( function() {  
18.         $("input[name='send-mail']").each( function() {  
19.             $(this).attr("checked", false);  
20.         });  
21.     });  
22.   
23.     // 选中的值  
24.     $("#sendMailAll").click( function() {  
25.         var selectedStr = "";  
26.         var $sendMail = $("input[name='send-mail']");  
27.         $sendMail.each( function() {  
28.             if ($(this).attr("checked")) {  
29.                 selectedStr += $(this).val() + ",";  
30.             }  
31.         });  
32.         if ($.trim(selectedStr) == "") {  
33.             alert("请未选中任何数据!");  
34.             return false;  
35.         }  
36.                alert(selectedStr );  
37.           
38.     });  
39.   
40. });  

 其页面部分代码如下:

Html代码   

1. <div>  
2.    <s:iterator value="page.result">  
3.     <tr>  
4.             <td><input type="checkbox" name="send-mail" id="send-mail-id-${sendMailId}" value="${sendMailId}"/></td>  
5.     </tr>   
6.     </s:iterator>  
7. </div>  
8. <div id="footer-checkbox"  style="width: 100%; margin-left: 260px;">  
9. <input type="button" id="selectAll" name="selectAll" value="全选" />  
10. <input type="button" id="inverseAll" name="inverseAll" value="反选" />  
11. <input type="button" id="deselectAll" name="deselectAll" value="取消" />  
12. <input type="button" id="sendMailAll" name="sendMailAll" value="发送" />  
13. </div>  

 在使用前，记得将jquery引进

Js代码   

1. <script src="js/jquery.js" type="text/javascript"></script>  

 

 

     $("document").ready(function(){
       $("#btn1").click(function(){
            $("[name='checkbox']").attr("checked",'true');//全选
        })
       $("#btn2").click(function(){
          $("[name='checkbox']").removeAttr("checked");//取消全选
       })
       $("#btn3").click(function(){
          $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
       })
       $("#btn4").click(function(){
          $("[name='checkbox']").each(function(){//反选
              if($(this).attr("checked")){
                $(this).removeAttr("checked");
            }
            else{
                $(this).attr("checked",'true');
            }
          })
       })
      $("#btn5").click(function(){//输出选中的值
       var str="";
          $("[name='checkbox'][checked]").each(function(){
              str+=$(this).val()+"\r\n";
            //alert($(this).val());
          })
         alert(str);
       })
      })