current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

share|improve this question
    
You should attach the listener to the click event, not change. Try it in IE to see why (it will not disptach a change event until the checkbox loses focus). – RobG Nov 27 '13 at 2:09
up vote 3 down vote accepted

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/

share|improve this answer
1  
The use of local variables improves the readability of the code but has no effect on performance in this case. – RobG Nov 27 '13 at 2:08
up vote 1 down vote

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.

share|improve this answer
up vote 1 down vote

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;
        }
    }
}
share|improve this answer
1  
You should toggle the display property between 'none' and '' (empty string) so that the input adopts its deafult or computed visibility (which is likely inline-block, not block). – RobG Nov 27 '13 at 2:11
    
@RobG, Got it, thanks for the tip, make sense :-) – The Alpha Nov 27 '13 at 2:12
up vote 0 down vote

replace:

.style.visibility="hidden";

on:

.style.display="none";

and:

.style.visibility="visible";

on:

.style.display="block";
share|improve this answer
up vote 0 down vote

try changing by the code below

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.