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


Tags: javascript,html,css,checkbox,visibility

Problem :

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.



Solution :

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/


    CSS Howto..

    How bad is to store all background images in CSS?

    Css styling without !important - how to do this?

    How to make more divs appear when hovering over one div?

    How to remove the vertical white line between the two green divs without floating?

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to create a multiple-row section with auto-sized columns

    How to disable CSS in Browser for testing purposes

    How to add inset box-shadow to mapbox-div?

    How to make this menu occupy all the remaining space's width?

    How to import css dynamically with js?

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to Make Text Black on .mouseover

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    how to make content to be fixed inside scroll div using only css?

    How can I get this chart to display next to data table in CSS?

    How to use custom css with bootstrap css

    How to center an overflowing image inside of a constraining div

    How to get the complete css information if css class is given form the used style sheets files

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How to serve different css files to different ajax pages?

    How to center two pieces of text using CSS and Bootstrap?

    Hide all, show a class with css

    How to make link change the css in the following page [closed]

    How to isolate specific platforms using CSS selectors in the Ionic framework

    How can i create a hexagon shape with an image inside? [duplicate]

    How to style an asp.net menu with CSS

    How do I center align a div that contains floated elements?

    CSS: How to set a fallback for bold font families?

    How to use CSS to position a div in the middle of the page while support a dynamic width?

    How to make image appear upon hover over text using css?