Check & Uncheck checkboxes

最新推荐文章于 2024-09-14 18:52:56 发布

iteye_6945

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量140

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_6945/article/details/82570046

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

google=>js select all

http://www.webdevdoor.com/javascript-ajax/javascript-function-check-uncheck-checkboxes/

Check & Uncheck checkboxes in JavaScript

Here’s a useful Javascript function I recently coded to allow a list of checkboxes in a form to be selected or unselected. The CheckAll function takes in two parameters, the first is the form name and the second is a boolean value – true or false, true being to select all checkboxes and false to un-select all.

 
         <script type= 
         "text/javascript" 
         language= 
         "javascript" 
         > 
         // <![CDATA[  
        
         function 
         checkAll(formname, checktoggle)  
        
         {  
        
         var 
         checkboxes =  
         new 
         Array();   
        
         checkboxes = document[formname].getElementsByTagName( 
         'input' 
         );  
        
         for 
         ( 
         var 
         i=0; i<checkboxes.length; i++)  {  
        
         if 
         (checkboxes[i].type ==  
         'checkbox' 
         )   {  
        
         checkboxes[i].checked = checktoggle;  
        
         }  
        
         }  
        
         }  
        
         // ]]></script>

The function gets the array of checkboxes from the selected form from their HTML tag ‘input’ type. If there are other input types such as ‘radio’, the function loops through all the input fields in the form, selecting only those that are checkboxes.

To call the function, add the following javascript command to your check all and uncheck all text or image links:

 
    
         < 
         a 
         onclick 
         = 
         "javascript:checkAll('form3', true);" 
         href 
         = 
         "javascript:void();" 
         >check all</ 
         a 
         >  
        
 
         < 
         a 
         onclick 
         = 
         "javascript:checkAll('form3', false);" 
         href 
         = 
         "javascript:void();" 
         >uncheck all</ 
         a 
         > 
        
 
  

One of the advantages of using this method is that unlike some other similar functions, this check all works regardless of the name of the checkbox. There may be occasions for example where the checkbox name changes within a list, i.e. ‘checkbox1′, ‘checkbox2′ etc rather than ‘checkbox’ for the whole list.

The Javascript check all function has been tested for compatibility in IE8, IE9, Chrome & FireFox

JQuery Check & Uncheck checkboxes

If you prefer a jQuery check/uncheck function, the below code will achieve exactly the same as above. This code will target all checkboxes on a page using the $(“input:checkbox”) selector.

 
         $(document).ready( 
         function 
         () {  
        
         $( 
         '#check-all' 
         ).click( 
         function 
         (){  
        
         $( 
         "input:checkbox" 
         ).attr( 
         'checked' 
         ,  
         true 
         );  
        
         });  
        
         $( 
         '#uncheck-all' 
         ).click( 
         function 
         (){  
        
         $( 
         "input:checkbox" 
         ).attr( 
         'checked' 
         ,  
         false 
         );  
        
         });  
        
         });

Rather than adding the check all function to the link itself, the jQuery version listens for when the ‘check all’ or ‘uncheck all’ link is clicked, which means these links will need an ID adding to them as below:

 
         <a id= 
         "check-all" 
         href= 
         "javascript:void(0);" 
         >check all</a>  
        
         <a id= 
         "uncheck-all" 
         href= 
         "javascript:void(0);" 
         >uncheck all</a>

If you wanted to target specific checkboxes instead of all checkboxes on the page, you could add a class to the input which allows you to check/uncheck the boxes by replacing the code $(“input:checkbox”).attr(‘checked’, true); with $(“.checkboxclass”).attr(‘checked’, true);