Change Button Text Based On Checkbox Selection

I have an unordered list of checkboxes. How do I create a function which changes a buttons text according to what checkboxes are selected? 1) When no checkboxes are selected the bu

Solution 1:

I've used your HTML and created a demo below that meets your all of the three requirements. The code is simple and will work with any number of checkboxes.

var selectedColours = [];

function selectionChanged(element) {
  if (element.checked) {
    selectedColours.push(element.value)
  } else {
    var index = selectedColours.indexOf(element.value);
    if (index > -1) {
      selectedColours.splice(index, 1);
    }
  }

  setButtonText();
}

function setButtonText() {
  var text = 'All';

  if (selectedColours.length > 1) {
    document.getElementById('button').innerHTML = selectedColours.length + ' selected';
  } else if (selectedColours.length === 1) {
    document.getElementById('button').innerHTML = selectedColours[0];
  } else {
    document.getElementById('button').innerHTML = 'All';
  }
}

<button id="button">All</button>
<ul id="colorlist">
  <li><input type="checkbox" id="Blue" value="Blue" onchange="selectionChanged(this)" /><label>Blue</label></li>
  <li><input type="checkbox" id="Red" value="Red" onchange="selectionChanged(this)" /><label>Red</label></li>
  <li><input type="checkbox" id="Green" value="Green" onchange="selectionChanged(this)" /><label>Green</label></li>
</ul>

Solution 2:

Here is one way to go about accomplishing that. Whenever a checkbox is clicked, run the same function which looks at which checkboxes are checks and changes the button text accordingly.

This isn't the most elegant solution, as it's not very scalable. If you wanted this to work with 20 checkboxes for example, you would definitely want to restructure this to iterate through all of the checkboxes programmatically.

var blue = document.getElementById('Blue');
var red = document.getElementById('Red');
var green = document.getElementById('Green');

function updateButton() {
  var numChecked = 0;
  if(blue.checked) numChecked++;
  if(red.checked) numChecked++;
  if(green.checked) numChecked++;

  if(numChecked === 0) {
    document.getElementById('button').innerHTML = 'All';
  } else if(numChecked === 1) {
    if(blue.checked) {
      document.getElementById('button').innerHTML = 'Blue';
    } else if(red.checked) {
      document.getElementById('button').innerHTML = 'Red';
    } else if(green.checked) {
      document.getElementById('button').innerHTML = 'Green';
    }
  } else {
    document.getElementById('button').innerHTML = numChecked + ' selected';
  } 
}

blue.addEventListener('click', updateButton);
red.addEventListener('click', updateButton);
green.addEventListener('click', updateButton);

<button id="button">All</button>
<ul id="colorlist">
  <li>
    <input type="checkbox" id="Blue" data-value="Blue" />
    <label>Blue</label>
  </li>
  <li>
    <input type="checkbox" id="Red" data-value="Red" />
    <label>Red</label>
  </li>
  <li>
    <input type="checkbox" id="Green" data-value="Green" />
    <label>Green</label>
  </li>
</ul>

Solution 3:

<input type="checkbox" id="Blue" data-value="Blue" onchange="MyFunction(this)" />

function MyFunction(elm) {
  if (elm.checked) {

  // then check other checkbox's state with getElementById and do stuff

  }

Solution 4:

You want each onclick for the checkboxes to call a function that finds how many of the boxes are checked and acts accordingly.

function checkChecked() {
    var bt = document.getElementById("button");
    var c = 0;
    var idx = -1;
    var arr = getElementsByTagName("input");
    for(var i = 0; i < arr.length; i++) {
        if(arr[i].type == "checkbox" && !arr[i].checked) {
            c++;
            idx = i;
        }
    }
    if(c == 0) {bt.innerHTML = "All";}
    else if(c == 1) {bt.innerHTML = arr[idx].getAttribute("data-value");}
    else {bt.innerHTML = c + " Selected.";}
}

document.getElementById('Blue').onclick = checkChecked;
document.getElementById('Red').onclick = checkChecked;
document.getElementById('Green').onclick = checkChecked;

Solution 5:

Here is my solution and it meets your all of the three requirements. This solution is based on your HTML code I've just replaced the data-value in the input tag whit value. In your JavaScript code I've replaced the anonymous function with elementClicked and I added the optionSelected array to rack the number of elements checked using indexOf.

var optionSelected = [];

document.getElementById('Blue').onclick = elementClicked;
document.getElementById('Red').onclick = elementClicked;
document.getElementById('Green').onclick = elementClicked;

function elementClicked() {
  if (this.checked) {
    // Adds the selected element id
    optionSelected.push(this.id)
  } else {
    var index = optionSelected.indexOf(this.id);
    if (index > -1) {
      // Removes one element from the index position
      optionSelected.splice(index, 1);
    }
  }

  updateButtonText();
}

function updateButtonText() {
  var button = document.getElementById('button')
  var elements = optionSelected.length;
  var baseText = 'All';
  
  if (elements === 0) {
    button.innerHTML = baseText;
  } else if (elements === 1) {
    button.innerHTML = optionSelected[0];
  } else if (elements > 1) {
    button.innerHTML = elements + ' selected';
  }
}

<button id="button">All</button>
<ul id="colorlist">
  <li><input type="checkbox" id="Blue" value="Blue" /><label>Blue</label></li>
  <li><input type="checkbox" id="Red" value="Red" /><label>Red</label></li>
  <li><input type="checkbox" id="Green" value="Green" /><label>Green</label></li>
</ul>