Question

I have 2 check boxes that shows and displays some divs.

The first check box when toggled will show bank name and bank address. The second box when checked will show bank name and bank branch.

What I want to achieve is that: when both check boxes are checked, the user should see bank name, bank address and bank branch and obviously when both boxes are not checked, the user should see nothing.

I’m having problems getting the logic right for the toggle function as both checkbox will seek to toggle bank name on/off irregardless of its current state. Clicking on checkbox2 will remove bank name from being displayed which is not what I want.

I think I should be using some sort of global variable to help me keep track of it but I cant seem to get it to work.

My code here: http://jsfiddle.net/mJbbc/

Answer 1

Put a check to your toggle code.

$('#checkbox1').click(function() {
  if($('#checkbox2').is(':checked')) {
    //Display Branch code
  } else {
    //Toggle code
  }
});

Similarly, for second checkbox

$('#checkbox2').click(function() {
  if($('#checkbox1').is(':checked')) {
    //Display Branch code
  } else {
    //Toggle code
  }
});