Question

I have a primary product array

var prodArr = new Array('Microsoft', 'Google');

Using prodArr as the primary loop, I created a UL LI checkboxtree which looks as follows:

<ul id="prodTree">
  <li>
    <input name="prod" id="prod" type="checkbox" value="Microsoft">
    <label>Microsoft</label>
    <ul id="MicrosoftTree">
      <li>
          <input id="prod" name="prod" type="checkbox" value="msp1">
          <label>Microsoft Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod" type="checkbox" value="msp2">
          <label>Microsoft Product 2</label>
      </li>
    </ul>
    <li>
    <input name="prod" id="prod" type="checkbox" value="Google">
    <label>Google</label>
    <ul id="GoogleTree">
      <li>
          <input id="prod" name="prod" type="checkbox" value="gp1">
          <label>Google Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod" type="checkbox" value="gp2">
          <label>Google Product 2</label>
      </li>
    </ul>
</ul>

On click of a button, I want to use prodArr and loop through every UL and group all the checkbox checked and create a textbox out of it. Lets assume ‘msp1’, ‘msp2’ and ‘msp9’ Microsoft products were selected. Example:

<input type='text' id='Microsoft' value='msp1, msp2, msp9' />

I have tried. Please help.

Answer 1

You can use the :checked pseudo-selector to select only checked checkboxes, and you can iterate over the matched set and get the values using val:

$("#button").click(function() {
    $("#prodTree :checkbox:checked").each(function() {
        var value = $(this).val();
    });
});

Here’s a working example of the above.