How to create a button that changes function from "Select all" to "Select none" in the this Javascript code

Question

Below is a very nice piece of code with toggles to select all or none of a set of selection boxes (source). The code works very well for me for what I plan to do with it, since with this javascript it is very easy to select only a manual subset instead of all of the checkboxes in the form by changing the 'for' values in the script. However, I need to have one button that does both selecting and deselecting of checkboxes instead of two separate buttons as below. There are other examples of code online that can do this but this code is better understandable to me and more flexable for the purpose I have in mind than other code examples that I found and I am not able to combine them. I have no experience to javascript. It frustrates me that I can't get a satifying solution while it is probably not that difficult ones you have more experience... Hope someone can tell my how to change the code below to one button that changes function from 'select all' to 'select none' once the user has clicked on it, or does something that has the same effect.

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a href="javascript:selectToggle(true, 'theForm');">All</a> | <a href="javascript:selectToggle(false, 'theForm');">None</a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

<script>
function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}
</script>

Help is very much appreciated.

You should really clean up your HTML. You have using `
` without the closing `
`. None of your `` are closed correctly either but that minor compared to the `
` tags. It might cause problems later with styles and JS (DOM). — Biotox, May 07 '13 at 16:14

score 0 · Answer 1 · answered May 07 '13 at 15:18

var isChecked = fasle;

function selectToggle(form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(!isChecked) {
               myForm.elements[i].checked = "checked";
               isChecked = true;
          } 
          else {
               myForm.elements[i].checked = "";
               isChecked = false;
          }
     }
}

and you can use the html like

Select <a href="javascript:selectToggle('theForm');">Select/Deselect</a> <p>

score 0 · Accepted Answer · answered May 07 '13 at 15:22

You can use a variable (lets name it checked) in the page scope to keep track of the last selection status. Then instead of using a parameter (toggle parameter in your code) you can use the checked state.

var checked = false;

function selectToggle(form) {

     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(checked) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
     checked = !checked;
}

score 0 · Answer 3 · answered May 07 '13 at 15:22

Change to

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a href="javascript:selectToggle('theForm');"><span id="selection">All</span></a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

<script>
var selected=false;
function selectToggle(form) {
    var myForm = document.forms[form];
    for( var i=0; i < myForm.length; i++ ) { 
         if(selected) {
              myForm.elements[i].checked = "checked";
              document.getElementById("selection").innerHTML="None";
         } 
         else {
               myForm.elements[i].checked = "";
              document.getElementById("selection").innerHTML="All";
         }
         selected=!selected;
     }  
}

score 0 · Answer 4 · answered May 07 '13 at 15:30

Change your form to

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a id="allLink" href="javascript:selectToggle('theForm');">All</a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

and change your script to:

<script>

var isAll = true;

function selectToggle(form) {


     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(isAll) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }

     var mylink = document.getElementById("allLink");
     isAll = !isAll;
     mylink.innerText = (!isAll) ? "None" : "All";
}
</script>

Biotox · Answer 5 · 2013-05-07T16:31:01.567

Something simple for you to look at: http://jsfiddle.net/aLnBL/2/

Providing you are able to use jQuery

JS

$(document).on('click', '#allLink', function() {
  $('.languageSelect').not(':checked').attr('checked', 'checked');
  $(this).html('None').attr('id', 'noneLink');
}).on('click', '#noneLink', function() {
  $('.languageSelect:checked').removeAttr('checked');
  $(this).html('All').attr('id', 'allLink');
});

$('.languageSelect').on('change', function() {
  if($('.languageSelect:checked').length < 1 && $('#allLink').length < 1){
    $('#noneLink').html('All').attr('id', 'allLink');
  }  else if($('.languageSelect').not(':checked').length < 1 && $('#allLink').length > 0) {
    $('#allLink').html('None').attr('id', 'noneLink');
  }
});

HTML

<form name="theForm">
  My favorite programming/scripting language is:
  <p>Select <span id="allLink">All</span></p>
  <ul>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="javascript" />JavaScript</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="perl" />Perl</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="php" />PHP</li>
    <li><input class="languageSelect" type="checkbox" name="answers[]" value="c++" />C++</li>
  </ul>
</form>

How to create a button that changes function from "Select all" to "Select none" in the this Javascript code

5 Answers5