将字符串转换为数组并正确显示 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) {&nbsp; var $form = $(this);&nbsp; var data = $form.serializeArray();&nbsp; var users = data.map(({ value }) => value).join(', ');&nbsp; $('.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">&nbsp; <input type="checkbox" name="user" value="121asa31" class="user">&nbsp; <input type="checkbox" name="user" value="121fdfd31" class="user">&nbsp; <input type="checkbox" name="user" value="1213fd1" class="user">&nbsp; <input type="checkbox" name="user" value="121jh31" class="user"></form><div class="block" data-id="">&nbsp; Some Content&nbsp;</div>用户和组示例function filterIdsByName(name, data) {&nbsp; return data&nbsp; &nbsp; .filter(item => item.name === name)&nbsp; &nbsp; .map(({ value }) => value)&nbsp; &nbsp; .join(', ');}$('.user-form').on('change', function(event) {&nbsp; var $form = $(this);&nbsp; var data = $form.serializeArray();&nbsp; var groups = filterIdsByName('group', data);&nbsp; var users = filterIdsByName('user', data);&nbsp; $('.block-groups').attr('data-group-id', groups);&nbsp; $('.block-groups').html(`Group ids: ${groups}`);&nbsp; $('.block-users').attr('data-user-id', users);&nbsp; $('.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">&nbsp; <input type="checkbox" name="user" value="121asa31" class="user">&nbsp; <input type="checkbox" name="user" value="121fdfd31" class="user">&nbsp; <input type="checkbox" name="user" value="1213fd1" class="user">&nbsp; <input type="checkbox" name="user" value="121jh31" class="user">&nbsp; <input type="checkbox" name="group" value="1213fd1" class="check group">&nbsp; <input type="checkbox" name="group" value="121jh31" class="check group"></form><div class="block-users" data-user-id="">&nbsp; Some Content&nbsp;</div><div class="block-groups" data-group-id="">&nbsp; Some Content&nbsp;</div>

Answer 2

您正在寻找的是一个列表而不是一个数组。对于复选框，您希望使用changenot click，因为单击可能会无意触发。您始终可以将一个名为 users 的变量设置为一个数组，然后简单地修改该数组，然后使用它来设置 data-id。我还更新了函数以在负载时运行并且更简单。function save_users(){&nbsp; &nbsp;var users = [];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $(".user:checked").each(function(){&nbsp; &nbsp; &nbsp; &nbsp;users.push($(this).attr('id'));&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;users = users.join(",");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$('.block').attr('data-id', users);}$('.user').on('change', function() {&nbsp; &nbsp; 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="">&nbsp; Some Content&nbsp;</div>

Answer 3

Javascript香草解决方案let checkboxes = document.getElementsByClassName("user");for (let i = 0; i < checkboxes.length; i++) {&nbsp; checkboxes[i].addEventListener("change", checkBoxChanged);}let checkedIDs = [];function checkBoxChanged() {&nbsp; if (event.target.checked) {&nbsp; &nbsp; checkedIDs.push(event.target.id);&nbsp; } else {&nbsp; &nbsp; if (checkedIDs.indexOf(event.target.id) > -1) {&nbsp; &nbsp; &nbsp; checkedIDs.splice(checkedIDs.indexOf(event.target.id), 1)&nbsp; &nbsp; }&nbsp; }&nbsp; console.log(checkedIDs);&nbsp; let myDiv = document.getElementsByClassName("block")[0];&nbsp; 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="">&nbsp; Some Content</div>