Display checkbox values on select in jquery

Question

$('input[name="accounts"]').on('click', function() {
  $('input[name="accounts"]:checked').each(function() {
    if (index == 0) {
      txt = $(this).val();
      $("#accounts-text").html(txt);
    } else {
      $("#accounts-text").append(txt);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Accounts</b></label><br>
<input type="checkbox" name="accounts" value="Gmail"> Gmail
<br>
<input type="checkbox" name="accounts" value="Facebook"> Facebook
<br>
<input type="checkbox" name="accounts" value="Instagram"> Instagram
<br>
<div class="form-group">
  <label>Accounts: </label>
  <h5 id="accounts-text"></h5>
</div>

In the above code,help me to find out the error while trying to display the check box values on select in the same page.

Do you want to display all checked values on #accounts-text? — Eddie
– Eddie, Commented Oct 25, 2018 at 3:50

Eddie · Accepted Answer · 2018-10-25 03:55:39Z

6

You can use map() and get() to get all values. This will return the array of all checked values. Use join() to convert the array into string.

$('input[name="accounts"]').on('click', function() {
  var result = $('input[name="accounts"]:checked').map(function() {
    return this.value;
  }).get();

  $("#accounts-text").html(result.join("<br />"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Accounts</b></label><br>
<input type="checkbox" name="accounts" value="Gmail"> Gmail
<br>
<input type="checkbox" name="accounts" value="Facebook"> Facebook
<br>
<input type="checkbox" name="accounts" value="Instagram"> Instagram
<br>
<div class="form-group">
  <label>Accounts: </label>
  <h5 id="accounts-text"></h5>
</div>

answered Oct 25, 2018 at 3:55

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

5 Comments

Ponnaveen S Over a year ago

Can you please explain what map() actually does here and why we have to convert array into string ?

Eddie Over a year ago

map() loop thru the jQuery object and translates all items. In this case, it returns the value.

Eddie Over a year ago

The get() part is converts it to an array.

Ponnaveen S Over a year ago

Thankful for your explanation.

Eddie Over a year ago

Happy to help :)

MahalingaM SubramaniyaM · Accepted Answer · 2018-10-25 07:35:01Z

1

try this

$('input[name="accounts"]').on('click', function() {
          var txt  = [];
            $.each($("input[name='accounts']:checked"), function(){            
                txt.push($(this).val());
            });
            //alert("out puts are: " + txt.join(", "));
            $("#accounts-text").html(txt.join("<br />"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Accounts</b></label><br>
<input type="checkbox" name="accounts" value="Gmail"> Gmail
<br>
<input type="checkbox" name="accounts" value="Facebook"> Facebook
<br>
<input type="checkbox" name="accounts" value="Instagram"> Instagram
<br>
<div class="form-group">
  <label>Accounts: </label>
  <h5 id="accounts-text"></h5>
</div>

answered Oct 25, 2018 at 7:35

MahalingaM SubramaniyaM

971 silver badge10 bronze badges

1 Comment

Ponnaveen S Over a year ago

What exactly the function push() does here ?

Collectives™ on Stack Overflow

Display checkbox values on select in jquery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related