想要给每个元素不同的ID

Question

I want to add HTML tag into the values. http://jsfiddle.net/iamakshay04/seyzta8c/1/

Above is the fiddle. When checkbox is clicked, the values are printed, I want to print each value as a different html element. <p>1</p> <p>2</p> <p>3</p>

 $('.ads_Checkbox').click(function() { var sel = $('input[type=checkbox]:checked').map(function(_, el) { return $(el).val(); }).get(); document.getElementById("demo").innerHTML = sel; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" /> <input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" /> <input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" /> <input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" /> <input type="button" id="save_value" name="save_value" value="Save" /> <p id="demo"> </p> 

Answer 1

This will give you the different elements:-

 $('.ads_Checkbox').change(function() { var sel = $('input[type=checkbox]:checked').map(function(_, el) { return $('<p></p>').html($(el).val()); }).get(); $("#demo").html(sel); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" /> <input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" /> <input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" /> <input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" /> <input type="button" id="save_value" name="save_value" value="Save" /> <p id="demo"> </p> 

Answer 2

If you want to show values as different elements then try below where you can add paragraphs at the time of reading the values.

 $('.ads_Checkbox').click(function() { var sel = $('input[type=checkbox]:checked').map(function(_, el) { return "<p>"+ $(el).val() + "</p>"; }).get(); document.getElementById("demo").innerHTML = sel; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" /> <input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" /> <input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" /> <input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" /> <input type="button" id="save_value" name="save_value" value="Save" /> <p id="demo"> </p>