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

PRANAV
December 1, 2022
206 views
2 votes
3 Answers

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/

Tags: javascript jquery

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.