Как получить список проверенных позиций с jQuery?

Question

Здесь я хочу проверить имена в другом div на той же странице с помощью jQuery. Как я могу это сделать?

<div class="w-100">
    <h6 class="approval--name">
        Name
    </h6>
    <p>Initiator</p>
</div>

<div class="form-group">
    <div class="checkbox">
        <input name="users" type="checkbox" value="1" id="1"/>
        <label for="1"></label>
    </div>
</div>

# I want checked names here
<div class="w-100">
    <h6 class="approval--name">Checked Name</h6>
    <p>Initiator</p>
</div>

Answer 1

В этом примере ниже adds или removes имена, если ваш флажок установлен или нет. Ваш checkbox element должен иметь attribute data-name с его именем. Я добавил ID к вашему div с проверенными именами, чтобы идентифицировать его с jQuery.

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
<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="users" type="checkbox" value="1" id="1"/>
    <label for="1">Initiator</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input data-name="Initiator2" name="users2" type="checkbox" value="2" id="2"/>
    <label for="2">Initiator2</label>
  </div>
</div>

# I want checked names here
<div id="checked-names" class="w-100">
  <h6 class="approval--name">Checked Name</h6>
</div>