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

3回答

aluckdog

您可以通过将<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>

0 0

天涯尽头无女友

您正在寻找的是一个列表而不是一个数组。对于复选框，您希望使用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>

0 0

慕的地6264312

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>

0 0