?
Solved

jquery, get value from array of checkboxes

Posted on 2012-04-10
7
Medium Priority
?
425 Views
Last Modified: 2012-06-27
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
Comment
Question by:justmelat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 1

Author Comment

by:justmelat
ID: 37828396
Yes I have seen those pages, but doesn't help me understand how to apply it to my scenario.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 37828734
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 1

Author Comment

by:justmelat
ID: 37830999
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 37831105
check this
http://jsfiddle.net/tL82T/1/

I am not using the id field here
0
 
LVL 1

Author Comment

by:justmelat
ID: 37833322
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
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1600 total points
ID: 37837312
0

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question