Question

I am using the script below to show and hide a div based on whether or not the checkbox is checked, this if so I can show/hide a paypal button until they accept the terms.

But we now want of offer three payment option so it will need to open/close 3 divs, I tried just copying the div 3 times but it still only opened one. Can any body help me with this please?

<script type="text/javascript">
function doInputs(obj){
  var checkboxs = obj.form.c1;
  var i =0, box;
  document.getElementById('mydiv').style.display = 'none';
  while(box = checkboxs[i++]){
    if(!box.checked)continue;
    document.getElementById('mydiv').style.display = '';
    break;
  }
}
</script>

<form>
  <input type="checkbox" name="c1" onclick="doInputs(this)">
</form>
<div id="mydiv" style="display:none">
  <input type="text">
</div>

Also it would be amazing if someone could help me add in another checkbox, and make the paypal buttons (divs) only show when BOTH are checked?

Thanks very much!

Answer 1

I also stole Marcus’s answer but with the following improvements:

• I use the jQuery document ready event so the code fires after the page loads
• I simplified the logic
• It works for multiple types of payment

http://jsfiddle.net/5Byes/3/