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:
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:
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'))
});
});
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 onI 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>
ASKER
Yes I have seen those pages, but doesn't help me understand how to apply it to my scenario.
check this simple one
http://jsfiddle.net/gurvinder372/tL82T/
http://jsfiddle.net/gurvinder372/tL82T/
ASKER
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.
id ="flyerSize[]" name="flyerSize[]". When I add the '[]' the code will not work.
ASKER
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 -
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/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery
http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery