Conditional hiding and showing divs

Conditional hiding and showing divs

I have two divs (div1 and div2) which I would like to be shown depending on whether a checkbox is checked and which option is selected from a dropdown box. I currently have this code but it doesn't work very well since if the checkbox is unchecked, the divs are still shown and i don't know how I would fix this: Any help would be fantastic!

  1. <script>
  2.                 $(function() { 
  3.                         $('#div1').hide();
  4.                         $('#div2').hide();
  5.                         $('#boxid').change(function() {
  6.                                 if($('#checkboxid').is(':checked')) {
  7.                                         if($('#boxid').val() == "TEST1") {
  8.                                                 $("#div1").show();
  9.                                                 $("#div2").hide();
  10.                                         } else if ($('#boxid').val() == "TEST2") {
  11.                                                 $("#div1").hide();
  12.                                                 $("#div2").show();
  13.                                         }
  14.                                 }
  15.                         });
  16.                 });
  17.         </script>