CODEWITHSUNDEEP
javascriptjqueryhtml
Jason
Jason

Reputation: 15

Check Box Values to List Jquery

Hi all I am struggling to achieve my my goal and I really need some help. I have a list of single check boxes that I need to be able to get the values and be able to put them in to a list

So for example 3 check boxes on the screen there could be more, the user clicks on one one or all of the them, and I want to be able to output the following:

<ul>
<li>Checkbox1 Value</li>
<li>Checkbox2 Value</li>
<li>Checkbox13Value</li>
</ul>

I also need to be able to save the selected values to a hiiden field as well like this if possible: Checkbox1 Value | Checkbox2 Value | Checkbox3 Value

There will be 2 sections on the page with where I will need this functionality so I assume I will be looking into the div tags that contain the check boxes.

I have found some code but I get it to do what I need

     function updateTextArea() {          
     var allVals = []; 
     $('#c_b :checked').each(function() { 
       allVals.push($(this).val()); 
     }); 
     $('#EXCUR').val(allVals)
     $('#t').val(allVals)
  } 
 $(function() { 
   $('#c_b input').click(updateTextArea); 
   updateTextArea(); 
 });

My HTML will be like this:

  <div id="c_b"> 
  <div>
   <input type="checkbox" value="one_name"> 
   <input type="checkbox" value="one_name1"> 
   <input type="checkbox" value="one_name2"> 
  </div> 
  </div> 

  <div id="c_G"> 
  <div>
   <input type="checkbox" value="one_name" checked> 
   <input type="checkbox" value="one_name1"> 
   <input type="checkbox" value="one_name2"> 
  </div> 
  </div> 
 <textarea id="t"></textarea> <!-- UL LIST SHOULD GO HERE -->
 <input type="hidden" id="EXCUR" />
<div id="OP"></div>

Any help with this would be great, I just cant get it to work

Many thanks in advance

Jason

Upvotes: 0

Views: 895

Answers (3)

sinemetu1
sinemetu1

Reputation: 1726

Here is a fiddle of what I think you're looking for but if you answer my comment above I'll be able to help you further.

Upvotes: 1

Michal
Michal

Reputation: 13649

    function updateTextArea(){
        var vals = []
        var str="<ul>";
    //iterate over checked boxes
        $("input:checked").each(function(){
            var v = $(this).val()
            vals.push(v)
            str += "<li>" + v + "</li>"
        })
        str+="</ul>"

        $("#EXCUR").val(vals.join("|"));
        $("#t").val(str);
    }
    $(function(){
//bind click to all checkboxes in the page
        $(":checkbox").click(updateTextArea);

    })

Upvotes: 0

beon
beon

Reputation: 493

You can use jQuery's map() to extract the values you want into an array and then join the items in the array however you want.

Something like this:

function updateTextArea() {

 var items = $.map($('#c_b :checked'),function(el, ix) {
    return 'Checkbox' + (ix+1) + ' ' + $(el).val();
 });
 if(items.length > 0) {
    $('#t').val('<ul><li>' + items.join('</li><li>') + '</li></ul>');
    $('#EXCUR').val(items.join(' | '))
 } else {
    $('#t').val('');
    $('#EXCUR').val('');
 }
}

$(function() {
  $('#c_b input').click(updateTextArea);
  updateTextArea();
});

Fiddle to demonstrate

Upvotes: 0

Related Questions