CODEWITHSUNDEEP
javascriptjquery
Robert John Concepcion
Robert John Concepcion

Reputation: 237

show/hide not functioning

<table class='generic'>
<script>
$('#select_bh').click(
    function(){
        if($('#select_bh')[0].checked){
        $('#hide_box_bh_s').show();
        }
        else{
        $('#hide_box_bh_s').hide();
        }
    }
);
</script>
<tr>
    <td>
        <b><input type="checkbox" id="select_bh" name="pj_boilerhouse" value="Boiler_House"/>Boiler House</b>
    </td>
</tr>
<tr>
    <td>
        <span id='hide_box_bh_s' style='display:none'>
            &nbsp;&nbsp;<b><input type="checkbox" class="case_bh_s" name="pj_bh_s" value="Structural"/> Structural</b>
        </span>
    </td>
</tr>
</table>

the show show/hide in JavaScript is not functioning.. some advice pls, thx.. some how it goes like this when i check the checkbox it will have a new row under the existing row

Upvotes: 2

Views: 111

Answers (2)

Ram
Ram

Reputation: 144659

You should put your codes inside document ready handler, your code doesn't work as you have bound the event handler to an element that is not added to the DOM yet. The codes that are within the ready handler are executed after the DOM is fully loaded. Also note that Java is not JavaScript.

$(document).ready(function(){
   $('#select_bh').click(function(){
        $('#hide_box_bh_s').css('display', this.checked ? 'block' : 'none');
   });
})

I have used conditional operator which is a shortcut for if statement, if the checkbox is checked it sets the value of display property to block otherwise it sets it to none.

Upvotes: 1

Damian SIlvera
Damian SIlvera

Reputation: 866

its working here you can see the code http://jsfiddle.net/damian_silvera/9ym5Y/

Upvotes: 1

Related Questions