web-dev-qa-db-ja.com

jQueryは、チェックボックスがオンのときにdivを非表示にし、オフのときに表示します

ユーザーがチェックボックスをクリックするとdivを非表示にし、ユーザーがチェックボックスをオフにすると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>

これを機能させるのに苦労しています。

javascriptjqueryhtmlcheckbox
19
user2035638

必ずreadyイベントを使用してください。

コード：

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

    });
});
41
gdoron

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
});
1
overflow