Изменить текст кнопки на основе выбора флажка

У меня есть неупорядоченный список флажков. Как создать функцию, которая изменяет текст кнопок в зависимости от того, какие флажки выбраны?

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>


javascript html
person J. Cannor    schedule 22.03.2017    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Я использовал ваш 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>

person Siddharth Pandey    schedule 22.03.2017
comment
вы также можете окружить флажок меткой, чтобы, когда пользователь нажимает на метку, значение флажка можно было отметить/снять. - person Siddharth Pandey; 22.03.2017

arrow_upward
0
arrow_downward

Вот один из способов добиться этого. Всякий раз, когда нажимается флажок, запускайте ту же функцию, которая проверяет, какие флажки являются флажками, и соответствующим образом изменяет текст кнопки.

Это не самое элегантное решение, так как оно не очень масштабируемо. Если вы хотите, чтобы это работало, например, с 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>

person AJ Funk    schedule 22.03.2017

arrow_upward
0
arrow_downward

Вы хотите, чтобы каждый щелчок по флажкам вызывал функцию, которая находит, сколько флажков отмечено, и действует соответствующим образом.

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;
person GameGibu    schedule 22.03.2017

arrow_upward
0
arrow_downward

Вот мое решение, и оно отвечает всем вашим трем требованиям. Это решение основано на вашем HTML-коде. Я только что заменил data-value в теге input на 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>

person Teocci    schedule 22.03.2017