How a checkbox will trigger another input element in html via javascript?

Question

I have two input checkboxes as well as two text fields:

HTML:

<form action="">
  <label for="male">Male</label>
  <input onchange="genderCheck()" type="checkbox" checked="checked" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input onchange="genderCheck()" type="checkbox" name="sex" id="female" value="female">

    <span id="spanIban">
    <br><label for="iban">IBAN:</label>
    <input type="text" name="mIban" id="iban">
  </span>
    <span id="spanBust"><br><label for="bust">Bust:</label>
      <input type="text" name="fBust" id="bust"></span>
</form>

I made the first checkbox checked by default as well as the first text field visible: CSS

#spanBust{visibility:hidden;}
#spanIban{visibility:visible;}

I would like it to do the following: When some of those checkboxes are triggered/untriggered the textareas below to do it as well (through visibility). Javascript:

var check = document.getElementById("male").defaultChecked;

function genderCheck(){
  if(document.getElementById("male").checked == true)
  {
 document.getElementById("spanIban").style.visibility="visible";
     document.getElementById("spanbBust").style.visibility="hidden";
}
  else if(document.getElementById("female").checked == true)
  {
 document.getElementById("spanIban").style.visibility="hidden";
 document.getElementById("spanBust").style.visibility="visible";
}
  else{  document.getElementById("spanIban").style.visibility="hidden";  document.getElementById("spanBust").style.visibility="hidden";}
}

I have done something wrong and have no idea how to clear up the things or rather the whole algorithm is wrong.

Answer 1

You have a few typos in your code, otherwise it kinda works. You can help reduce these and also improve performance by stashing all your lookups in variables. The logic also does not seem quite right, you want the female checkbox only to toggle if the male is not checked? Anyway, here is a new version:

function GenderCheck(){
    var checkMale = document.getElementById("male"),
        checkFemale = document.getElementById("female"),
        iban = document.getElementById("spanIban"),
        bust = document.getElementById("spanBust");

    iban.style.visibility = (checkMale.checked ? "visible" : "hidden");
    bust.style.visibility = (checkFemale.checked ? "visible" : "hidden");

}

http://jsfiddle.net/bm2Nu/1/

Answer 2

If form controls have a name that identifies them, they usually don't need an ID. Also, if you pass a reference to the element from which the listener is being called, you can access the related form and controls more easily.

Also, you should call the listener on the click event, not change event, as some browsers will not dispatch a change event on checkboxes until the control loses focus, which can produce confusing results.

<input onclick="genderCheck(this)" type="checkbox" checked name="sex" value="male">

Then in the function:

function genderCheck(element) {

  if (element.value == 'male') {
    element.form.mIban.style.visibility = element.checked? 'visible' : 'hidden';

  } else if (element.value == 'female') {
    element.form.fBust.style.visibility = element.checked? 'visible' : 'hidden';
  }
}

If you don't want to send the value of the hidden inputs to the server, you should also disable them when they are hidden and enable them when they are visible.

Answer 3

Maybe you want something like this ( Example )

HTML Elements: ( genderCheck(this) )

<!-- ... -->
<input onchange="genderCheck(this)" type="checkbox" checked="checked" name="sex" id="male" value="male" />
<!-- ... -->
<input onchange="genderCheck(this)" type="checkbox" name="sex" id="female" value="female" />
<!-- ... -->

JS:

function genderCheck(el)
{
    var male = document.getElementById('spanIban'),
    maleCb = document.getElementById('male'),
    female = document.getElementById('spanBust'),
    femaleCb = document.getElementById('female');
    if(el.checked){
        if(el.id == 'female') {
            female.style.display = 'block';
            male.style.display = 'none';
            maleCb.checked = false;
        }
        else {
            male.style.display = 'block';
            female.style.display = 'none';
            femaleCb.checked = false;
        }
    }
    else {
        if(el.id == 'female') {
            female.style.display = 'none';
            male.style.display = 'block';
            maleCb.checked = true;
        }
        else {
            male.style.display = 'none';
            female.style.display = 'block';
            femaleCb.checked = true;
        }
    }
}

Answer 4

replace:

.style.visibility="hidden";

on:

.style.display="none";

and:

.style.visibility="visible";

on:

.style.display="block";

Answer 5

try changing by the code below

document.getElementById("spanIban").style.display="none"; document.getElementById("spanBust").style.display="inline";