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 = [];

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

  setButtonText();
}

functionsetButtonText() {
  var text = 'All';

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

<buttonid="button">All</button><ulid="colorlist"><li><inputtype="checkbox"id="Blue"value="Blue"onchange="selectionChanged(this)" /><label>Blue</label></li><li><inputtype="checkbox"id="Red"value="Red"onchange="selectionChanged(this)" /><label>Red</label></li><li><inputtype="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');

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

  if(numChecked === 0) {
    document.getElementById('button').innerHTML = 'All';
  } elseif(numChecked === 1) {
    if(blue.checked) {
      document.getElementById('button').innerHTML = 'Blue';
    } elseif(red.checked) {
      document.getElementById('button').innerHTML = 'Red';
    } elseif(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);

<buttonid="button">All</button><ulid="colorlist"><li><inputtype="checkbox"id="Blue"data-value="Blue" /><label>Blue</label></li><li><inputtype="checkbox"id="Red"data-value="Red" /><label>Red</label></li><li><inputtype="checkbox"id="Green"data-value="Green" /><label>Green</label></li></ul>

Solution 3:

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

functionMyFunction(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.

functioncheckChecked() {
    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";}
    elseif(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;

functionelementClicked() {
  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();
}

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

<buttonid="button">All</button><ulid="colorlist"><li><inputtype="checkbox"id="Blue"value="Blue" /><label>Blue</label></li><li><inputtype="checkbox"id="Red"value="Red" /><label>Red</label></li><li><inputtype="checkbox"id="Green"value="Green" /><label>Green</label></li></ul>