Home » Jquery » html – How to get the list of checked items with jQuery?

html – How to get the list of checked items with jQuery?

Posted by: admin February 22, 2020 Leave a comment

Questions:

Here I want the checked names in another div within the same page with the help of jQuery. How can I do it?

<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>
How to&Answer:

This example below adds or removes the names if your checkbox is selected or not. Your checkbox element must have the attribute data-name with its name in it. I have added an ID to your div with the checked names in it, to identify it with 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>