Вывести все элементы отмеченных флажков на консоль

У меня есть три флажка с именем класса (имена). Я пытаюсь сказать, если флажок установлен, запишите значение в консоль.

if( $('.names').is(':checked') ){
        console.log($('.names').val()); 
    }else{
        console.log('null'); 
    }

Однако это только запись первого значения в консоль (когда отмечено более одного).

Нужно ли мне создавать массив и регистрировать его?


javascript checkbox jquery console.log
person Ryan    schedule 21.10.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Версия геттера val() вернет значение только первого элемента.

Одно из решений — получить массив всех проверенных значений и распечатать его.

var checked = $('.names:checked').map(function() {
  return this.value;
}).get();
if (checked.length) {
  console.log(checked);
} else {
  console.log('null');
}

person Arun P Johny    schedule 21.10.2015
comment
Do i need to create an array and log that? не означает, что OP хочет массив. - person Tushar; 21.10.2015
comment
if (checked.length) { console.log(checked); } else { console.log('null'); } не требуется ==› подойдет только console.log(checked); - person Tushar; 21.10.2015

arrow_upward
0
arrow_downward

Ванильное Javascript-решение:

[].forEach.call(document.querySelectorAll('.names:checked'), function (cb) {
    console.log(cb.value);
});

И если вы не хотите этого и для старых браузеров:

var cbs = document.querySelectorAll('.names:checked');
for(var i = 0; i < cbs.length; i++)
    console.log(cbs[i].value);
person Werner    schedule 21.10.2015

arrow_upward
0
arrow_downward

Хотя у вас уже есть правильный ответ, стоит отметить, что jQuery не требуется, чтобы это было «легко»; это вполне возможно в ванильном JavaScript:

// creating a named function to handle the change-event (later):
function logToConsole() {
  // retrieves a collection of elements that match the CSS selector:
  var checked = document.querySelectorAll('input[type=checkbox].names:checked'),
    // converts the collection to an Array:
    values = Array.prototype.slice.call(checked, 0)

    // map iterates over the Array returned by
    // Array.prototype.slice():
    .map(function(checkbox) {
    // checkbox is the Array Element itself:

      // returning the value of the checked checkbox:
      return checkbox.value;
    });

  // if the collection has a length other than 0:
  if (checked.length) {

    // outputs the array of values to the console:
    console.log(values);
  }
}

document.querySelector('form').addEventListener('change', logToConsole);
<form action="#" method="post">
  <fieldset>
    <legend>Check any of the check-boxes to see the values of those check-boxes logged to the console</legend>
    <label>value: 3
      <input value="3" class="names" type="checkbox" />
    </label>
    <label>value: 4
      <input value="4" class="names" type="checkbox" />
    </label>
    <label>value: 5
      <input value="5" class="names" type="checkbox" />
    </label>
    <label>value: 6
      <input value="6" class="names" type="checkbox" />
    </label>
  </fieldset>
</form>

person David says reinstate Monica    schedule 21.10.2015
comment
Я пытаюсь сказать, установлен ли флажок, записывать значение в консоль., а не количество отмеченных флажков. - person Tushar; 21.10.2015
comment
@Tushar: да, я не видел вашего комментария, но я обновил свой ответ, когда вы комментировали это; Я понял для себя, как только я разместил. - person David says reinstate Monica; 21.10.2015