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

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

1） 如果未选中任何复选框，则按钮默认返回为“全部”

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

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

以下是我到目前为止的情况：

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

全部

蓝色的
红色的
绿色的

这里有一种方法可以实现这一点。每当单击复选框时，运行相同的函数，查看哪些复选框是复选框，并相应地更改按钮文本

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

var blue=document.getElementById（'blue'）；
var red=document.getElementById（'red'）；
var green=document.getElementById（'green'）；
函数updateButton（）{
var numChecked=0；
if（blue.checked）numChecked++；
如果（红色选中）numChecked++；
如果（绿色。选中）numChecked++；
如果（numChecked==0）{
document.getElementById（'button'）。innerHTML='All'；
}else if（numChecked==1）{
如果（蓝色，选中）{
document.getElementById（'button'）。innerHTML='Blue'；
}else if（红色，选中）{
document.getElementById（'button'）。innerHTML='Red'；
}else if（绿色，选中）{
document.getElementById（'button'）。innerHTML='Green'；
}
}否则{
document.getElementById（'button'）。innerHTML=numChecked+'selected'；
} 
}
blue.addEventListener（'单击'，更新按钮）；
红色。addEventListener（'单击'，更新按钮）；
绿色。addEventListener（'单击'，更新按钮）
全部


蓝色


红色


绿色

这里有一种方法可以实现这一点。每当单击复选框时，运行相同的函数，查看哪些复选框是复选框，并相应地更改按钮文本

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


var blue=document.getElementById（'blue'）；
var red=document.getElementById（'red'）；
var green=document.getElementById（'green'）；
函数updateButton（）{
var numChecked=0；
if（blue.checked）numChecked++；
如果（红色选中）numChecked++；
如果（绿色。选中）numChecked++；
如果（numChecked==0）{
document.getElementById（'button'）。innerHTML='All'；
}else if（numChecked==1）{
如果（蓝色，选中）{
document.getElementById（'button'）。innerHTML='Blue'；
}else if（红色，选中）{
document.getElementById（'button'）。innerHTML='Red'；
}else if（绿色，选中）{
document.getElementById（'button'）。innerHTML='Green'；
}
}否则{
document.getElementById（'button'）。innerHTML=numChecked+'selected'；
} 
}
blue.addEventListener（'单击'，更新按钮）；
红色。addEventListener（'单击'，更新按钮）；
绿色。addEventListener（'单击'，更新按钮）
全部


蓝色


红色


绿色


函数MyFunction（elm）{
如果（elm.选中）{
//然后用getElementById检查其他复选框的状态并执行操作
}

函数MyFunction（elm）{
如果（elm.选中）{
//然后用getElementById检查其他复选框的状态并执行操作
}
我使用了您的HTML，并在下面创建了一个演示，它满足您的所有三个要求。代码很简单，可以使用任意数量的复选框


var selectedcolors=[]；
功能选择已更改（元素）{
如果（元素已选中）{
选择颜色。推送（元素。值）
}否则{
var指数=选定的颜色.indexOf（元素.value）；
如果（索引>-1）{
选择颜色。拼接（索引，1）；
}
}
setButtonText（）；
}
函数setButtonText（）{
var text='All'；
如果（SelectedColors.length>1）{
document.getElementById（'button'）.innerHTML=selectedcolors.length+'selected'；
}else if（selectedcolors.length==1）{
document.getElementById（'button'）.innerHTML=selectedColor[0]；
}否则{
document.getElementById（'button'）。innerHTML='All'；
}
}
全部

蓝色的
红色的
绿色的
我使用了您的HTML，并在下面创建了一个演示，它满足您的所有三个要求。代码很简单，可以使用任意数量的复选框


var selectedcolors=[]；
功能选择已更改（元素）{
如果（元素已选中）{
选择颜色。推送（元素。值）
}否则{
var指数=选定的颜色.indexOf（元素.value）；
如果（索引>-1）{
选择颜色。拼接（索引，1）；
}
}
setButtonText（）；
}
函数setButtonText（）{
var text='All'；
如果（SelectedColors.length>1）{
document.getElementById（'button'）.innerHTML=selectedcolors.length+'selected'；
}else if（selectedcolors.length==1）{
document.getElementById（'button'）.innerHTML=selectedColor[0]；
}否则{
文件
<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

  }

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;