将字符串转换为数组并正确显示 ID？

Question

单击复选框时，我试图获取该复选框的 id 并将其放入数组中，以便我可以在 data-id 属性中正确显示它。因此，一旦我单击复选框，应在带有类块的 div 的 data-id 属性中添加或删除 id 这是 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()数组的方法仅从每个检查的输入中获取 id 值，并将这些值连接起来.join()，将数组转换为 id 以逗号分隔的字符串。并使用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

您正在寻找的是一个列表而不是一个数组。对于复选框，您希望使用changenot click，因为单击可能会无意触发。

您始终可以将一个名为 users 的变量设置为一个数组，然后简单地修改该数组，然后使用它来设置 data-id。

我还更新了函数以在负载时运行并且更简单。

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>