首页 文章

选中复选框时,jQuery隐藏div,未选中时显示

提问于
浏览
17

我试图在用户点击复选框时隐藏div,并在用户取消选中该复选框时显示它 . HTML:

<div id="autoUpdate" class="autoUpdate">
   content
</div>

jQuery的:

<script>
$('#checkbox1').change(function(){
        if (this.checked) {
            $('#autoUpdate').fadeIn('slow');
        }
        else {
            $('#autoUpdate').fadeOut('slow');
        }                   
    });
</script>

我很难让这个工作 .

2 回答

  • 1

    确保使用 ready 事件 .

    Code:

    $(document).ready(function(){
        $('#checkbox1').change(function(){
            if(this.checked)
                $('#autoUpdate').fadeIn('slow');
            else
                $('#autoUpdate').fadeOut('slow');
    
        });
    });
    
  • 38

    HTML

    <input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
    <div id="block">Some text here</div>
    

    CSS

    #block{display:none;background:#eef;padding:10px;text-align:center;}
    

    javascript / jquery

    $('#cbxShowHide').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
    });
    

相关问题