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.

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
– RobG, Commented Nov 27, 2013 at 2:09

Malk · Accepted Answer · 2013-11-27 01:50:47Z

3

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/

answered Nov 27, 2013 at 1:50

Malk

12k4 gold badges35 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

The use of local variables improves the readability of the code but has no effect on performance in this case.

RobG · Accepted Answer · 2013-11-27 01:47:51Z

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.

The Alpha · Accepted Answer · 2013-11-27 02:08:42Z

1

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;
        }
    }
}

edited Nov 27, 2013 at 2:08

answered Nov 27, 2013 at 1:51

The Alpha

147k30 gold badges294 silver badges313 bronze badges

1 Comment

RobG Over a year ago

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).

Ruben Kazumov · Accepted Answer · 2013-11-27 01:39:10Z

0

replace:

.style.visibility="hidden";

on:

.style.display="none";

and:

.style.visibility="visible";

on:

.style.display="block";

answered Nov 27, 2013 at 1:39

Ruben Kazumov

3,8472 gold badges28 silver badges42 bronze badges

Comments

Jesse · Accepted Answer · 2013-11-27 01:39:48Z

0

try changing by the code below

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

answered Nov 27, 2013 at 1:39

Jesse

1271 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related