Как правильно отобразить отмеченные атрибуты в другом div с разными стилями?

Question

Я очень новичок в jQuery. Первая часть кода предназначена для проверки входных данных и после проверки должна отображать отмеченные элементы в следующем формате. Как это сделать с помощью jquery.

<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

После проверки он должен отображаться в этом формате.

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul class="approval approval_scrolltab mt-3">
    <li>
      <div class="approval--member">
        <img src="assets/images/user.jpg" class="user--image" />
        <div class="w-100">
          <h6 class="approval--name">Name</h6>
          <p>Initiator</p>
        </div>
        <a href="">
          <span class="ic-close"></span>
        </a>

      </div>
    </li>
  </ul>
</div>

Я пытался вот так. Он работал нормально для имен, но не знал, как отобразить это изображение пользователя с именем, а также рядом с именем есть значок отмены. Я только сейчас возможность отображать имя с этим кодом.

<script>
  $('input[type="checkbox"]').on('change', function () {
    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    if ($(this).prop('checked')) {
      $('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
      $('#checked-images').append("<img src='image'")
    } else {
      $('#checked-names p[data-name="' + name + '"]').remove();
      $('#checked-images').remove()
    }
  });
</script>

ОБНОВЛЕНИЕ С помощью этой кнопки закрытия я хочу удалить это из проверенного списка (который прекрасно работает), а также я хочу снять этот флажок с проверено на входе.

 $('body').on('click', '.ic-close', function() {
    $(this).closest('li').remove()
    $(this).closest('li').prop('checked',false) #didn't worked
  });

Answer 1

Этот скрипт может быть полезен для вас. Я только добавил ID в список пользователей и удалил тег a с кнопки закрытия в вашем HTML. JavaScript добавляет HTML you wi sh с name и image к списку. Если щелкнуть диапазон close, элемент будет удален.

ОБНОВЛЕНИЕ: Чтобы снять флажок, закрыв элемент списка пользователей, необходимо добавить атрибут, например data-name="Initiator" к флажку. В JavaScript, если добавили две строки в click listener из ic-close item, см. Ниже.

$('input[type="checkbox"]').on('change', function() {
  var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
  var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();

  if($(this).prop('checked')) {

    $('ul#user-list').append(
    '<li id="' + name + '">' +
      '<div class="approval--member">' +
        '<img src="' + image_url + '" class="user--image" />' +
        '<div class="w-100">' +
          '<h6 class="approval--name">Name</h6>' +
          '<p>' + name + '</p>' +
        '</div>' +
        '<span class="ic-close">Close</span>' +
      '</div>' +
    '</li>');

  } else {
    $('ul#user-list #' + name).remove();
  }

  $('body').on('click', '.ic-close', function() {
    var name = $(this).closest('li').find('.approval--name ~ p' ).text();
    $('input[data-name="' + name + '"]').prop( "checked", false );

    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input data-name="Initiator" name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul id="user-list" class="approval approval_scrolltab mt-3">
  </ul>
</div>

Answer 2

Просто проверьте, действительно ли вам нужен jQuery, в 2020 году чистые Javascript имеют большинство jQuery функций: http://youmightnotneedjquery.com/

Вы можете получить проверенный атрибутировать через событие вроде этого:

var checkbox = document.querySelector('[type="checkbox"]');

// Event Listener:
checkbox.addEventListener('change', function(event) {
    alert(event.target.checked);
    if(event.target.checked) {
        // Do want do you want when checked
    }
});

Я не очень хорошо понимаю, что вы ожидали, но я надеюсь, что это может помочь вам.