I have a checkbox That I need to show a div when it is clicked. I have 3 different javascripts that i have attempted to get this to work with.

//function showhide() {
//    var checkbox = document.getElementById("assist");
//    var expanded1 = document.getElementById("expanded");
//    var expanded2 = document.getElementById("expanded2");

//    expanded1.style.visibility = (expanded1.style.visibility == 'false') ? "true" : "false";
//    alert('test');
//}
function(){
var checkbox = document.getElementById("assist");
var expanded1 = document.getElementById("expanded");
var expanded2 = document.getElementById("expanded2");
checkbox.onchange = function () {
    expanded1.style.visibility = this.checked ? 'true' : 'false';
    alert('test');

}
//function check() {
//    $('chk').click(function () {
//        if (this.checked) {
//            $("#expanded").show();
//            $("#expanded2").show();
//        }
//        else {
//            $("#expanded").hide();
//            $("#expanded2").hide();
//        }
//    });
//}

This is the checkbox below.

<input type="checkbox" runat="server" id="assist"  onclick="showhide();" /></div>

The divs that need to be shown/hidden are expanded and expanded2.

I cannot get the javascript functions to be hit from the checkbox could someone tell me what is wrong.

I have a checkbox That I need to show a div when it is clicked. I have 3 different javascripts that i have attempted to get this to work with.

//function showhide() {
//    var checkbox = document.getElementById("assist");
//    var expanded1 = document.getElementById("expanded");
//    var expanded2 = document.getElementById("expanded2");

//    expanded1.style.visibility = (expanded1.style.visibility == 'false') ? "true" : "false";
//    alert('test');
//}
function(){
var checkbox = document.getElementById("assist");
var expanded1 = document.getElementById("expanded");
var expanded2 = document.getElementById("expanded2");
checkbox.onchange = function () {
    expanded1.style.visibility = this.checked ? 'true' : 'false';
    alert('test');

}
//function check() {
//    $('chk').click(function () {
//        if (this.checked) {
//            $("#expanded").show();
//            $("#expanded2").show();
//        }
//        else {
//            $("#expanded").hide();
//            $("#expanded2").hide();
//        }
//    });
//}

This is the checkbox below.

<input type="checkbox" runat="server" id="assist"  onclick="showhide();" /></div>

The divs that need to be shown/hidden are expanded and expanded2.

I cannot get the javascript functions to be hit from the checkbox could someone tell me what is wrong.

• javascript
• jquery
• checkbox

Share Improve this question Follow edited Apr 21, 2014 at 13:59 Nivas 18.4k44 gold badges6464 silver badges7676 bronze badges asked Apr 21, 2014 at 13:57 user3494929user3494929 1111 gold badge11 silver badge44 bronze badges 4

• true and false aren't valid values for the visibility property, so that's probably your problem – Mike Corcoran Commented Apr 21, 2014 at 14:02
• What on earth is a nameless function() doing over there? – Batu.Khan Commented Apr 21, 2014 at 14:03
• Your code with showHide works fine for me: jsfiddle/nivas/wrn42 – Nivas Commented Apr 21, 2014 at 14:04
• i guess the showhide get hit but i am getting a style is set to null error – user3494929 Commented Apr 21, 2014 at 14:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Use the window.onload event to assign the change handler and remove the inline onclick from the HTML. Also the visibility CSS should be visible or hidden.

Fiddle

window.onload = function () {
    var checkbox = document.getElementById("assist");
    var expanded1 = document.getElementById("expanded");
    checkbox.onchange = function () {
        expanded1.style.visibility = this.checked ? 'visible' : 'hidden';
    };
};

For Hiding the DIV using Jquery you can try below code:

instead of this.checked use $(this).is(':checked')

 $('.chk').click( function () {
    var $this = $(this);
    if( $this.is(':checked') == true ) {
       $("#div1").show();        
    }  else {
       $("#div1").hide();

    }    
});

html

 <input type="checkbox" runat="server" id="assist"  onclick="showhide();" />



            <div class="required1" id="mycheckboxdiv1" style="display:none" >
                your code;
            </div>

this will do for u :)
jquery

<script>
$(document).ready(function() {

    $('#mycheckboxdiv1').hide();

    $('#assist').click(function(){


            if($('#assist').is(':checked')){

                        $('#mycheckboxdiv1').toggle();
              }
          else 
              {
                $('#mycheckboxdiv1').hide();

              }
       });

});

</script>

http://jsfiddle/maree_chaudhry/QmXCV/ here is fiddle

You're already using jQuery, so you could just use:

$("#assist").change(function(){
   $("#expanded, #expanded2").toggle();
});

jsFiddle here