0

複数で悩んでいますCheckBoxes

マークアップ

<p>
  <label>Display 1</label>
  <input class="show-options" id="one" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 1</p>
</div>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 2</p>
</div>

JS

jQuery(document).ready(function($){

  $('.show-options').live('change', function(){
      if( $(this).is(':checked') ) {
        $(this).parent().parent().find('.show-options-panel').show('medium');
      } else {
        $(this).parent().parent().find('.show-options-panel').hide('medium');
      }
 });

});

そのマークアップで倍数を作成することは可能CheckBoxesですか? これが例ですhttp://jsfiddle.net/satryabima/CupF3/1/

アップデート

これが私の友人からの解決策ですhttp://jsfiddle.net/neosheet/9y44X/

4

1 に答える 1

1

showpanel に同じクラスを与えたので、1 つのチェックボックスが.show-options-panel をアクティブにしたときに、別のチェックボックスが同じパネルを再度表示しないようにしました。もちろん、間違ったテキストで既に表示されているためです。そして、あなたのチェックボックスは同じIDを持っています。それはクールではありません.

何がクリックされたかを把握するには、コードを次のように編集する必要があります。

HTML

<p>
  <label>Display 1</label>
  <input class="show-options" id="first" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

JS

$(function() {
    $('.show-options').on('change', function(){
        if( $(this).is(':checked') ) {
            console.log($(this).attr("id") + " checked");
        } 
        else {
            console.log($(this).attr("id") + " unchecked");
        }
    });
});

ブラウザで Javascript コンソール ウィンドウを開くと、何が起こっているかがわかります。もう 1 つのオプションは、異なるテキストと異なる ID を持つ 2 つの表示パネルを使用し、ID または値やデータ属性などのチェックボックスのその他の決定論的属性に基づいてそれらを表示および非表示にすることです。

乾杯。

于 2013-01-12T12:50:02.860 に答える