Looping through array values using JQuery and show them on separate lines

Question

I'm building a simple shopping cart where visitors can select a few items they want, click on the "Next" button, and see the confirmation list of things they just selected. I would like to have the confirmation list shown on each line for each item selected.

HTML selection

<div id="c_b">
  <input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked> 
  <input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
  <input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>  

<button type='button' id='confirm'>Next</button>

HTML confirmation list

<div id='confirmation_list' style='display:none;'>
<h2>You have selected item 1</h2>
<h2>Your have selected item 2 </h2>
</div>

JS

$(function(){
   $('#confirm').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
    });
  });
});

I ultimately want to replace the words 'Your have selected item 2' in h2s with the values selected from each check box. With the code above I'm able to collect the values of each checkbox into an array val, but having difficulty looping through and displaying them.

Any advice would be appreciated.

Arun P Johny · Accepted Answer · 2014-05-28 03:22:35Z

2

Try

$(function () {
    $('#confirm').click(function () {
        var val = [];
        var els = $('input:checkbox:checked').map(function (i) {
            return $('<h2 />', {
                text: 'You have selected item \'' + this.value + '\''
            })
        }).get();

        $('#confirmation_list').empty().append(els).show()
    });
});

Demo: Fiddle

answered May 28, 2014 at 3:22

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

user3192948 Over a year ago

Thanks a ton. What's the '\' after 'You have selected item' for?

Arun P Johny Over a year ago

@user3192948 just to add the selected items value with a pair of ''

Krishanu Dey · Accepted Answer · 2014-05-28 03:30:11Z

1

Try this

<div id="c_b">
    <input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked>
    <input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
    <input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>
<button type='button' id='confirm'>Next</button>
<div id='confirmation_list' style='display:none;'>
</div>

Your JS code should be

$(function () {
    $('#confirm').click(function () {
        $("#confirmation_list").empty();
        $('input:checkbox:checked').each(function (i) {
            $("#confirmation_list").append("<h2>You have selected item '" + $(this).val() + "'</h2>");

        });
        $("#confirmation_list").show();
    });
});

Fiddle

answered May 28, 2014 at 3:30

Krishanu Dey

6,4067 gold badges53 silver badges69 bronze badges

1 Comment

user3192948 Over a year ago

Thanks a ton. Worked like a charm.

Collectives™ on Stack Overflow

Looping through array values using JQuery and show them on separate lines

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related