PDA

View Full Version : how to make fields appear when selecting multiple checkboxes



fsd2010
09-18-2010, 12:27 PM
Hi everyone,

I am having trouble with some javascript and was wondering if I could get some help. I have a form which has checkboxes for choosinga cms platform, and when selecting a checkbox, another fieldset underneath containing a textbox for the platform version slides down.

This is the code I am using:


<script>
$(document).ready(function(){
$("#platform-option").css("display","none");

$(".platformbox").click(function(){
if($("#joomla").attr("checked")==true){
$("#platform-option").slideDown("fast"); //Slide Down Effect
} else {
$("#platform-option").slideUp("fast"); //Slide Up Effect
}
});
});
</script>


What I am stuck with is applying this code to more than one checkbox. Currently it only works when the 'joomla' checkbox is selected. I want to apply this to another checkbox too, so that when either 'joomla' or 'wordpress' is selected from the list of checkboxes, the 'platform version' field appears. And when another checkbox apart from 'joomla' or 'wordpress' are selected, the 'platform version' field is hidden again.

Thanks in advance for your help, it is much appreciated :)

fobos
09-20-2010, 12:52 AM
Your code is fine but i re wrote it to suit your needs. I hope this is what you were looking for. Basically you need to impliment the "else if" statement.



// First hide the platform options
$("#platform_option").hide();
// now toggle if checked, but first assign click to the checkboxes
#("#joomla,#wordpress").click(function() {
if($("#joomla").attr("checked")==true) {
$("#platform_option").show('slow');
} else if($("#wordpress").attr("checked")==true) {
$("#platform_option").show('slow');
} else {
$("#platform_option").hide('slow');
}
});