Check & Uncheck checkboxes

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现批量选择或取消选择网页表单中所有复选框的方法。通过简单的函数调用即可完成操作，适用于不同名称的复选框。此方法已在多种浏览器上进行了兼容性测试。

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