jquery - チェックボックスがチェックされていない場合にDIVを表示する

Question

チェックボックスがオフの場合はdivを表示し、チェックされている場合は非表示にしようとしています。私はこれを持っていますが、何かが欠けているようです:

http://jsfiddle.net/XyUWV/8/

HTML:

<input name="billing_check" id="billing_check" type="checkbox" class="billing_check" size="40"  checked="checked"/>

<div class="registration_box01 showme">
          <div class="title">
            <h4>billing information - infomration associated with your credit card<br />
            </h4>
          </div>
</div>

Javascript:

$("input[name='billing_check']").change(function() {
  (".showme").toggle($("input[name='mycheckboxes']:checked").length>0);
});

スタイル：

.showme{
    display:none;
}

Answer 1

間違ったチェックボックスをチェックしている可能性があると思いmycheckboxesますbilling_check. また、 の代わりに、次のように.lengthに対してチェックすることもできます。.is(':checked')

$('#billing_check').change(function() {     
    $('.showme').toggle(!$(this).is(':checked'));
});

jsFiddle デモ

Answer 2

Felix Kling が言ったように、jquery 関数の前に $ を設定する必要があります。しかし、主な間違いは、それが機能する誤った入力名mycheckboxesnameでしたbilling_check。

HTML

<input name="billing_check" id="billing_check" type="checkbox" class="billing_check" size="40"  checked="checked"/>

<div class="registration_box01 showme">
  <div class="title">
    <h4>billing information - infomration associated with your credit card<br />
    </h4>
  </div>
</div>

</p>

CSS

.showme{
    display:none;
}

</p>

JS

$('#billing_check').change(function() {     
    $('.registration_box01').toggle(!$(this).is(':checked'));
});

</p>

デモ

Answer 3

そのチェックボックスをIDで参照し、 .is(":checked") を使用します

http://jsfiddle.net/XyUWV/12/

Answer 4

テストされていませんが、これを行うことができます

$("#billing_check").click(function()
{
    if(this.checked)
    {
        $(".registration_box01").hide();
    }else
    { 
        $(".registration_box01").show();
   }
});