Преобразовать строку в массив и правильно показать идентификаторы?

Question

При нажатии на флажки я пытаюсь получить идентификатор этого флажка и поместить его в массив, чтобы я мог правильно отобразить его в атрибуте data-id. Поэтому, как только я нажму на флажок, идентификатор должен быть добавлен или удален в атрибуте data-id элемента div с блоком класса. Вот jsfiddle https://jsfiddle.net/chille1987/5g28uoqk/25/

<input type="checkbox" id="121asa31" class="user">
<input type="checkbox" id="121fdfd31" class="user">
<input type="checkbox" id="1213fd1" class="user">
<input type="checkbox" id="121jh31" class="user">

<div class="block" data-id="">
  Some Content 
</div>

$('.user').on('click', function() {
    id = $(this).attr('id');
    users = $('.block').data('data-id')
    if($(this).is(':checked')) {
        users.push(id);
        users.toString();
        $('.block').attr('data-id', users);
    } else {
        index = users.indexOf(id);
        users.splice(index, 1);
        $('.block').attr('data-id', users);
    }
});

Ожидаемые результаты должны выглядеть следующим образом

<div class="block" data-id="121asa31, 121jh31"></div>

Answer 1

Вы можете сделать это намного проще, поместив элементы <input> в тег <form> и прослушав событие change в форме. Событие изменения происходит всякий раз, когда пользователь устанавливает или снимает флажок. Всякий раз, когда происходит изменение, используйте .serializeArray(), чтобы получить массив со всеми значениями, которые проверяются в вашей форме. Затем используйте метод массива .map(), чтобы получить значение идентификатора только из каждого проверенного ввода, и объедините значения с помощью .join(), чтобы превратить массив в строку с идентификаторами. разделенных запятыми. И с результатом установите значение data-id с новой строкой.

$('.user-form').on('change', function(event) {
  var $form = $(this);
  var data = $form.serializeArray();
  var users = data.map(({ value }) => value).join(', ');
  $('.block').attr('data-id', users);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="user-form">
  <input type="checkbox" name="user" value="121asa31" class="user">
  <input type="checkbox" name="user" value="121fdfd31" class="user">
  <input type="checkbox" name="user" value="1213fd1" class="user">
  <input type="checkbox" name="user" value="121jh31" class="user">
</form>

<div class="block" data-id="">
  Some Content 
</div>

Пример с пользователями и группами

function filterIdsByName(name, data) {
  return data
    .filter(item => item.name === name)
    .map(({ value }) => value)
    .join(', ');
}

$('.user-form').on('change', function(event) {
  var $form = $(this);
  var data = $form.serializeArray();
  var groups = filterIdsByName('group', data);
  var users = filterIdsByName('user', data);
  $('.block-groups').attr('data-group-id', groups);
  $('.block-groups').html(`Group ids: ${groups}`);
  $('.block-users').attr('data-user-id', users);
  $('.block-users').html(`User ids: ${users}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="user-form">
  <input type="checkbox" name="user" value="121asa31" class="user">
  <input type="checkbox" name="user" value="121fdfd31" class="user">
  <input type="checkbox" name="user" value="1213fd1" class="user">
  <input type="checkbox" name="user" value="121jh31" class="user">
  <input type="checkbox" name="group" value="1213fd1" class="check group">
  <input type="checkbox" name="group" value="121jh31" class="check group">
</form>

<div class="block-users" data-user-id="">
  Some Content 
</div>

<div class="block-groups" data-group-id="">
  Some Content 
</div>

Answer 2

То, что вы ищете, это список, а не массив. Для флажков вы хотите использовать change, а не click, поскольку щелчок может непреднамеренно сработать.

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

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

function save_users(){
   var users = [];
    
    $(".user:checked").each(function(){
       users.push($(this).attr('id'));
    });
    
   users = users.join(",");
    
   $('.block').attr('data-id', users);
}

$('.user').on('change', function() {
    save_users();
});

save_users();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="121asa31" class="user">
<input type="checkbox" id="121fdfd31" class="user">
<input type="checkbox" id="1213fd1" class="user">
<input type="checkbox" id="121jh31" class="user" checked>

<div class="block" data-id="">
  Some Content 
</div>

Answer 3

Javascript Ванильный раствор

let checkboxes = document.getElementsByClassName("user");
for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", checkBoxChanged);
}
let checkedIDs = [];

function checkBoxChanged() {
  if (event.target.checked) {
    checkedIDs.push(event.target.id);
  } else {
    if (checkedIDs.indexOf(event.target.id) > -1) {
      checkedIDs.splice(checkedIDs.indexOf(event.target.id), 1)
    }
  }
  console.log(checkedIDs);
  let myDiv = document.getElementsByClassName("block")[0];
  myDiv.setAttribute("id", checkedIDs);
}

<input type="checkbox" id="121asa31" class="user">
<input type="checkbox" id="121fdfd31" class="user">
<input type="checkbox" id="1213fd1" class="user">
<input type="checkbox" id="121jh31" class="user">

<div class="block" data-id="">
  Some Content
</div>