欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery处理复选框  

程序员文章站 2022-06-12 11:56:53
...

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

Js代码   jquery处理复选框
            
    
    
         
  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代码   jquery处理复选框
            
    
    
         
  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代码   jquery处理复选框
            
    
    
         
  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);
       })
      })