Link to home
Start Free TrialLog in
Avatar of justmelat
justmelat

asked on

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

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Avatar of justmelat
justmelat

ASKER

Yes I have seen those pages, but doesn't help me understand how to apply it to my scenario.
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.
check this
http://jsfiddle.net/tL82T/1/

I am not using the id field here
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

ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial