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

Question

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

1）当没有选中复选框时，按钮默认返回读取＆＃34;全部＆＃34;。

2）当仅选择一个复选框时，按钮的文本将更改以匹配选择，例如当＆＃34;蓝＆＃34;选中复选框后，按钮也会显示＆＃34;蓝色＆＃34;

3）当选择两个或多个复选框时，按钮文本显示为＆＃34; 2选择＆＃34;，＆＃34; 3选择＆＃34;，＆＃34; 4选择＆＃34;等等根据选择的数量

这是我到目前为止所做的：

＆＃13;

＆＃13;

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';}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

这是实现这一目标的一种方法。每当单击一个复选框时，运行相同的功能，查看哪些复选框是检查，并相应地更改按钮文本。

这不是最优雅的解决方案，因为它的可扩展性不高。例如，如果您希望这可以使用20个复选框，那么您肯定希望重新构造它以编程方式迭代所有复选框。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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

  }

Answer 4

您希望每个onclick复选框都可以调用一个函数来查找检查了多少个框并相应地执行操作。

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;

Answer 5

let blue = document.getElementById('Blue');
let red = document.getElementById('Red');
let green = document.getElementById('Green');
let button = document.getElementById('button');
let selected = [];

blue.onclick = () => {
     if (blue.checked) {
      selected.push('Blue');
    } else {
      selected.splice(selected.indexOf('Blue'), 1);
    }
    
    changeButton();
}

red.onclick = () => {
     if (red.checked) {
      selected.push('Red');
    } else {
      selected.splice(selected.indexOf('Red'), 1);
    }
    
    changeButton();
}

green.onclick = () => {
     if (green.checked) {
      selected.push('Green');
    } else {
      selected.splice(selected.indexOf('Green'), 1);
    }
    
    changeButton();
}

changeButton = () => {
    if (!selected[0]){
      button.style.color = 'Black';
      button.innerHTML = 'All';
      return
    }

    if (selected.length > 1) {
      button.innerHTML = `${selected.length} Selected`;
      button.style.color = 'Black';
    } else {
      button.innerHTML = selected[0];
      button.style.color = selected[0];
    }
}

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

Answer 6

这是我的解决方案，它满足您的所有三个要求。此解决方案基于您的HTML代码，我刚刚替换了data-value代码whit input中的value。 在您的JavaScript代码中，我已使用elementClicked替换了匿名函数，并添加了optionSelected数组以使用indexOf来检查已检查的元素数。

＆＃13;

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;