ADVERTISEMENT
ADVERTISEMENT

JavaScript - Select/Unselect (Check/Uncheck) all CheckBoxes on Button Click

This JavaScript function is used to check (select), unselect (uncheck) all checkboxes, in this example we will check all checkboxes by clicking Select All button and unselect by clicking on Unselect All button.

There are two JavaScript functions which will be called on both button click events.

JavaScript Code Snippet - Select/Unselect all CheckBoxes

JavaScript function:

<script type="text/javascript">
    function selectAll() {
        var items = document.getElementsByName('acs');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = true;
        }
    }

    function UnSelectAll() {
        var items = document.getElementsByName('acs');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = false;
        }
    }			
</script>

HTML Source Code with JavaScript:

<!--JavaScript - Select/Unselect (Check/Uncheck) all CheckBoxes on Button Click.-->
<html>
   <head>
      <title>JavaScript - Select/Unselect (Check/Uncheck) all CheckBoxes on Button Click.</title>
      <script type="text/javascript">
         function selectAll(){
         	var items=document.getElementsByName('acs');
         	for(var i=0; i<items.length; i++){
         		if(items[i].type=='checkbox')
         			items[i].checked=true;
         	}
         }
         
         function UnSelectAll(){
         	var items=document.getElementsByName('acs');
         	for(var i=0; i<items.length; i++){
         		if(items[i].type=='checkbox')
         			items[i].checked=false;
         	}
         }			
      </script>
   </head>
   <body style="text-align: left;">
      <h1>JavaScript - Select/Unselect (Check/Uncheck) all CheckBoxes on Button Click.</h1>
      <big>Select your favourite accessories: </big><br>
      <input type="checkbox" name="acs" value="Mobile">Mobile<br>
      <input type="checkbox" name="acs" value="Tab">Tab<br>
      <input type="checkbox" name="acs" value="Laptop">Laptop<br>
      <input type="checkbox" name="acs" value="IPod">IPod<br>
      <p>
         <input type="button" onclick='selectAll()' value="Select All"/>
         <input type="button" onclick='UnSelectAll()' value="Unselect All"/>
      </p>
   </body>
</html>

Result:

select/unselect all checkboxes using javascript, check/uncheck all checkboxes using javascript

JavaScript Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions


ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.