• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

jquery, get value from array of checkboxes

I have series of checkboxes, when the first is selected which has a value of 'Size 1", the corresponding fieldset will appear.  if unchecked/not checked, the corresponding fieldset will not appear and so on

I've been working with the toggle feature of jquery, but can't figure out how to get it to check that the boxes are checked/unchecked and if checked what is the value of those checked.  This is the code I have come up with:

$(document).ready(function(){
		$('#fs_flyer_desc1').hide();
		$('#fs_flyer_desc2').hide();
		$('#fs_flyer_desc3').hide();
});

$(document).ready(function(){
        $("#flyerSize[]").click(function() 
        {$("#fs_flyer_desc1").toggle($(this).is(':checked'))
        });
});

Open in new window

which does work, but I can't figure out how to incorporate [if #flySize[] has a value of 'Size 1', show the matching fieldset,  if #flySize[] has a value of 'Size 2', show the matching field set, ] and so on

I know this is not the most efficient and elegant code, but I am just learning jquery, so this layout is making sense to my mind at the moment.

Test Code that I am working with:

<fieldset name="fs_flyer" id="fs_flyer">
<legend style="color:blue">Flyer</legend>
<table style="width: 100%">
<tr>
<td style="width: 188px"><label id="Label1">Sizes:</label></td>
<td><input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 1" />Size 1<br/>
<input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
<input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
			</td>
</tr>
</table>

</fieldset>

<fieldset name="fs_flyer_desc1" id="fs_flyer_desc1">
                <legend  style="color:maroon">Size 1 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription">Description:</label></td>
                        <td><textarea name="TextArea1" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc2" id="fs_flyer_desc2">
                <legend  style="color:maroon">Size 2 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription2">Description:</label></td>
                        <td><textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc3" id="fs_flyer_desc3">
                <legend style="color:maroon">Size 3 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription3">Description:</label></td>
                        <td><textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>

Open in new window

0
justmelat
Asked:
justmelat
  • 4
  • 3
1 Solution
 
justmelatAuthor Commented:
Yes I have seen those pages, but doesn't help me understand how to apply it to my scenario.
0
 
Gurvinder Pal SinghCommented:
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
justmelatAuthor Commented:
Here seems to be the big stumbling block, in the working app, the id and name are an array.
id ="flyerSize[]" name="flyerSize[]".  When I add the '[]' the code will not work.
0
 
Gurvinder Pal SinghCommented:
check this
http://jsfiddle.net/tL82T/1/

I am not using the id field here
0
 
justmelatAuthor Commented:
Ahhh - this is what kept it from working - input[name='flyerSize[]']" Thank you.

I got stuck on this one thing and got away from my original question: using your solution, how would I toggle [hide/show] fieldsets, id or name, based on the checkboxes that are checked/uncheck?

see my fiddle -
http://jsfiddle.net/justmelat/tL82T/2/

Open in new window

0
 
Gurvinder Pal SinghCommented:
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now