hide text when checkbox is unchecked using jquery

Question

the checkboxes are checked by default. if unchecked they should hide the text. how do i hide or show the text in jquery?

html:

    


        
                      

              相关标签:
       
      

Answer 1

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#name").click(function() {
            if($('#name:checked').length) {
                $("#nametxt").show();
            } else {
                $("#nametxt").hide();
            }
        });

        $("#reference").click(function() {
            if($('#reference:checked').length) {
                $("#reftxt").show();
            } else {
                $("#reftxt").hide();
            }
        });
    })
</script>

Answer 2

Change the id of <div id="reftxt"> to <div id="referencetxt"> and then you can do this:

$('div.check input:checkbox').bind('change',function(){
    $('#'+this.id+'txt').toggle($(this).is(':checked'));
});

The change event will fire if its clicked on or if someone uses the keyboard to check/uncheck the checkbox.

As long as the ID's of the text divs are always checkbox ID + 'txt' and are in div.check then this will handle those too. Keeps you from having to repeat yourself as you get more checkboxes.

Answer 3

if the check box is not checked how to display a msg through the Jquery,

You must tick the site box to accept.