javascript - 根据复选框选择更改按钮文本

Question

我有一个无序列表的复选框。如何创建一个根据选中的复选框更改按钮文本的函数？

1) 当没有选择任何复选框时，按钮将默认返回为“全部”。

2) 当仅选择一个复选框时，按钮的文本将更改以匹配选择，例如当选择“蓝色”复选框时，按钮也会显示为“蓝色”

3) 当选择两个或多个复选框时，按钮文本根据所做选择的数量显示为“2 selected”、“3 selected”、“4 selected”等

这是我到目前为止所拥有的:

document.getElementById('Blue').onclick = function() {
    document.getElementById('button').innerHTML = 'Blue';}

document.getElementById('Red').onclick = function() {
    document.getElementById('button').innerHTML = 'Red';}

document.getElementById('Green').onclick = function() {
    document.getElementById('button').innerHTML = 'Green';}

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

Answer 1

我使用了您的 HTML 并创建了下面的演示，可以满足您的所有三个要求。该代码很简单，并且适用于任意数量的复选框。

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>