根據復選框選擇更改按鈕文本

Question

我有一個無序列表的復選框。 如何創建根據選擇的復選框更改按鈕文本的功能？

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

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

Answer 2

這是實現該目標的一種方法。 每當單擊復選框時，請運行相同的功能，以查看哪些復選框已被選中，並相應地更改按鈕文本。

這不是最優雅的解決方案，因為它不是很可擴展。 例如，如果您希望它與20個復選框一起使用，則肯定要對其進行重組，以編程方式遍歷所有復選框。

 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> 

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代碼，我剛剛在input標簽whit value替換了data-value value 。 在您的JavaScript代碼中，我已將匿名函數替換為elementClicked並添加了optionSelected數組以存儲使用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>