Получить все отмеченные чекбоксы

109

03 августа 2019, 01:50

Нужно выбрать имена всех отмеченных чекбоксов,

скрипт:

var nonno = $(".form-item-checkbox > input").map(function(indx, element) { 
  return $(element).attr('name'); 
});

возвращает список всех имён.

следующий, по идее, должен выбрать все отмеченные.

var nonno = $(".form-item-checkbox > input").prop("checked").map(function(indx, element) { 
  return $(element).attr('name'); 
});

Но не работает.

Answer 1

Если я правильно понял вопрос: Вам нужно получить атрибут name у активных чекбоксов?

Вот решение:

$('.form-item_checkbox input:checked').each(function() { 
  console.log($(this).attr('name')); 
  // Output: input_1, input_3 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="form-item_checkbox"> 
  <li> 
    <input type="checkbox" name="input_1" checked /> Input #1 
  </li> 
  <li> 
    <input type="checkbox" name="input_2" /> Input #2 
  </li> 
  <li> 
    <input type="checkbox" name="input_3" checked /> Input #3 
  </li> 
  <li> 
    <input type="checkbox" name="input_4" /> Input #4 
  </li> 
</ul>

UPD. Если же Вам нужно при изменении чекбокса добавлять/удалять его имя из массива, то вот ещё одно решение:

var listName = []; 
 
Array.prototype.remove = function(value) { 
  var idx = this.indexOf(value); 
  if (idx != -1) { 
    return this.splice(idx, 1); 
  } 
  return false; 
} 
 
$('.form-item_checkbox input').change(function(e) { 
  if (e.target.checked) { 
    listName.push(e.target.name); 
    console.log('PUSH NAME =>', listName); 
  } else { 
    listName.remove(e.target.name); 
    console.log('REMOVE NAME =>', listName); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="form-item_checkbox"> 
  <li> 
    <input type="checkbox" name="input_1" /> Input #1 
  </li> 
  <li> 
    <input type="checkbox" name="input_2" /> Input #2 
  </li> 
  <li> 
    <input type="checkbox" name="input_3" /> Input #3 
  </li> 
  <li> 
    <input type="checkbox" name="input_4" /> Input #4 
  </li> 
</ul>

Answer 2

Можно массив из checkbox отфильтровать по наличию атрибута checked.

var nonno = $(".form-item-checkbox > input") 
  .filter(function(index, element) { 
    return $(element).attr('checked') == 'checked'; 
  }) 
  .map(function(indx, element) { 
    return $(element).attr('name'); 
  }); 
 
console.log(nonno);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li class="form-item-checkbox"><input type="checkbox" checked name="Check1" /> Check 1</li> 
  <li class="form-item-checkbox"><input type="checkbox" name="Check2" /> NoCheck 1</li> 
  <li class="form-item-checkbox"><input type="checkbox" checked name="Check3" /> Check 2</li> 
  <li class="form-item-checkbox"><input type="checkbox" checked name="Check4" /> Check 3</li> 
  <li class="form-item-checkbox"><input type="checkbox" name="Check5" /> NoCheck 2</li> 
</ul>