Solved

jquery, get value from array of checkboxes

Posted on 2012-04-10
7
420 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
ID: 37828000
0
 
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:gurvinder372
ID: 37828734
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
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:gurvinder372
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:
gurvinder372 earned 400 total points
ID: 37837312
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
$q.all is slower or not  in  Angularjs 2 37
Wordpress Pagination 1 46
2 separate CSS animations 2 32
Toggle a div with a button and timer with jQuery 4 10
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

730 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