web-dev-qa-db-ja.com

jQueryを使用してチェックボックスで表示/非表示

チェックボックスに基づいて表示/非表示にするHTMLフォームのセクションを作成しようとしています。これは私が持っているエッセンスコードです：

_<script src="/js/jquery.js"></script>
<script language="JavaScript">
    function toggle(className){
        var $input = $(this);
        if($(this).prop('checked'))
            $(className).show();
        else
            $(className).hide();
        }
</script>

<fieldset><legend>Check Here
    <input type="checkbox" onclick="toggle('.myClass')" ></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>
_

チェックボックスをクリックすると、スパンが非表示になり、元に戻りません。 $(this).is(':checked')も使用しました。 $(this).prop('checked')は次のように評価されているようです false チェックされているかどうか。私の推測では、$(this)を誤って使用しています。ここで何が欠けていますか？

javascriptjquerycheckboxshow-hide
8
Andrew

HTML、クリックイベントでthisを渡す

_<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
_

JS

_function toggle(className, obj) {
    var $input = $(obj);
    if ($input.prop('checked')) $(className).hide();
    else $(className).show();
}
_

または、propを使用せずに、次のように実行できます。

_function toggle(className, obj) {
    if ( obj.checked ) $(className).hide();
    else $(className).show();
}
_

または、 .toggle( display ) を使用して1行で：

_function toggle(className, obj) {
    $(className).toggle( !obj.checked )
}
_
19
palaѕн

インラインではないイベントハンドラーを使用し、チェックボックスの状態に基づいて要素をtoggle()します。

<script src="/js/jquery.js"></script>
<script type="text/javaScript">
    $(function() {
        $('input[type="checkbox"]').on('change', function() {
            $(this).closest('fieldset').find('.myClass').toggle(!this.checked);
        });
    });
</script>

<fieldset>
    <legend>Check Here<input type="checkbox"></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>

[〜＃〜]フィドル[〜＃〜]

これは、同じマークアップを持つ複数のフィールドセットでも機能します。

8
adeneo

jQueryを介してイベントをバインドしようとすると、$(this)にアクセスできます。

$(document).ready(function() {
  $(":checkbox").click(function(event) {
    if ($(this).is(":checked"))
      $(".myClass").show();
    else
      $(".myClass").hide();
  });
});
7
kpull1