How to add & remove multiple values to div on click of list items in jQuery?

Question

I wanted to add & remove (Multiple values) of the input to tag on the click event of checkbox. done the code for single items, please help me to do for getting multiple values.

$(document).ready(function() {
  $('input').click(function() {
    var selectedval = $(this).val();
    $('h3').text(selectedval);
  });
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <h3>Select</h3>

  <ul>
    <li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
    <li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
    <li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
    <li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
    <li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
  </ul>
</div>

http://jsfiddle.net/anadmin7776/6yo2dbxj/22/

Please see How to Ask, then revise your post to show the problem here. No need to send us to another site. — isherwood
– isherwood, Commented Dec 1, 2022 at 15:12

isherwood · Accepted Answer · 2022-12-01 15:25:19Z

1

Check this example. I'm not sure if that's what you're asking.

$(document).ready(function() {
  $('input').click(function() {
    var selectedval = function() {
      let v = [];

      $('input:checked').each(function(i, el) {
        v.push(el.value);
      });

      return v.join(', ');
    };

    $('h3').text(selectedval);
  });
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <h3>Select</h3>

  <ul>
    <li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
    <li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
    <li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
    <li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
    <li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
  </ul>
</div>

edited Dec 1, 2022 at 15:25

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 1, 2022 at 15:18

vmar

134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

carkod Over a year ago

Can you share your thoughts why this may not be what OP is asking for?

isherwood · Accepted Answer · 2022-12-01 15:25:56Z

I suggest accumulating the values in a loop over the checked inputs. This results in the selected values being displayed in list order. If that's not the goal, the other solutions may be better.

Note that I switched to the change event for better performance.

$(document).ready(function() {
  $('.selector input').change(function() {
    let headingString = '';

    $('.selector input:checked').each((i, el) => {
      headingString = headingString + ' ' + el.value;
    });

    $('#banner-message h3 span').text(headingString);
  });
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <h3>Selected:<span></span></h3>

  <ul class="selector">
    <li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
    <li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
    <li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
    <li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
    <li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
  </ul>
</div>

isherwood · Accepted Answer · 2022-12-01 15:23:34Z

I hope this might help you a lot.

var collection = [];

$(document).ready(function() {
  $('input').click(function() {
    var selectedval = $(this).val();
    
    if (!$(this).is(':checked'))
      collection.splice(collection.indexOf(selectedval), 1);
    else
      collection.push(selectedval);
      
    $('h3').text(collection.toString());
  });
});

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <h3>Select <span></span></h3>

  <ul class="selector">
    <li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
    <li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
    <li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
    <li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
    <li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
  </ul>
</div>

Collectives™ on Stack Overflow

How to add & remove multiple values to div on click of list items in jQuery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related