Solved

jquery, get value from array of checkboxes

Posted on 2012-04-10
7
410 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
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
0
 
LVL 1

Author Comment

by:justmelat
Comment Utility
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:gurvinder372
Comment Utility
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 1

Author Comment

by:justmelat
Comment Utility
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:gurvinder372
Comment Utility
check this
http://jsfiddle.net/tL82T/1/

I am not using the id field here
0
 
LVL 1

Author Comment

by:justmelat
Comment Utility
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:
gurvinder372 earned 400 total points
Comment Utility
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now