Question

101

Hiding a Check Box in HTML

rated 0 times [ 105] [ 4] / answers: 1 / hits: 22634 / 12 Years ago, thu, november 8, 2012, 12:00:00

I have these two checkboxes:

<label for=cell>3. Do you currently have a cell phone? (Y/N)</label>

<input type=checkbox name=cell name=cell id=cell data-on=Yes data-off=No />



<label for=blackBerry>4.If YES, is the cell phone a BlackBerry? (Y/N)</label>

<input type=checkbox name=blackBerry name=blackBerry id= blackBerry data-on=Yes data-off=No />

How can I get the second question to display on the page, ONLY when the first one is selected as Yes?

Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 12 Years ago destanyb · Accepted Answer

You can do this using javascript

Javascript

var elem = document.getElementById('cell');



elem.addEventListener('click', function() {

      var divElem = document.getElementById('divPhone'); 

    if( this.checked){

        divElem.style.display = 'block'  ; 

    }

    else{

        divElem.style.display = 'none'  ;

    }

});

HTML

   <label for=cell>3. Do you currently have a cell phone? (Y/N)</label>

    <input type=checkbox name=cell name=cell

           id=cell data-on=Yes data-off=No />



    <div id=divPhone class=hidden>

      <label for=blackBerry>4.If YES, is the cell phone a BlackBerry?

                                                          (Y/N)</label>

      <input type=checkbox name=blackBerry name=blackBerry 

            id= blackBerry data-on=Yes data-off=No />

    </div>



.hidden 

{

    display: none;

}

Check Fiddle

It is still more simple using jQuery..

$('#cell').on('click', function() {

    if(this.checked){

       $('#divPhone').removeClass('hidden');

    }

    else{

       $('#divPhone').addClass('hidden');

    }        

});

jQuery Fiddle