1

どうすればこれを機能させることができますか...

ボックスを選択すると、入力ボックスまたはボックスがチェックされているときに表示する必要があるものが表示されます...問題は、5つのチェックボックスがあることです...

ユーザーが選択した場合

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

この時点までコードは正常に動作します...しかし、その後、彼/彼女はボックス 3 が不要になり、3 を 5 に切り替えたいことに気付きました...送信ボタンをクリックする前に

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

それが起こると、入力ボックスが表示から非表示に変わります...そして、1、2、4、および5がまだ選択されているので、それは望ましくありません...

誰も選択されていない場合は何も表示されません...しかし、選択されているものがある限り、入力ボックス、ボタン、テキスト、または必要なものはすべて表示されなければなりません...

テスト用のコードは次のとおりです。

HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

ジャバ

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

ライブ テストへのリンク: http://jsfiddle.net/GBSZ8/284/

ありがとうございました。

4

2 に答える 2

1 
$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

デモ: http://jsfiddle.net/samliew/GBSZ8/295/

livejQuery 1.7 以下でのみ機能することに注意してください。最新の jQuery への移行については、jQuery 1.9 を参照してください。live() は関数ではありません

アップデート：

あなたのウェブサイトのチェックボックスクラスは、質問のものとは異なります!!!

代わりにこのセレクターを使用してください。

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});
于 2013-09-05T02:00:04.893 に答える
0

セレクターを変更しました。コンテキストは限られていますが、提供されたサンプルに基づくと、これがより良い選択のようです。

$('.aboveage2').bind('change', function(){
  var $inputs = $(this).siblings('input').add($(this));
  var checked = false;
  for (var i = 0; i < $inputs.length; i++) {
    var input = $inputs[i];
    checked = $(input).is(':checked');
    if (checked) break;
  }
  $('#date').toggle(checked);
});

このソリューションは、各チェックボックスを単純にループします。チェックボックスがチェックされている場合、ループから抜け出し、 $("#date") が表示されていることを確認します。それ以外の場合は、$("#date") が非表示になります。

http://jsfiddle.net/RV4aJ/

于 2013-09-05T02:32:54.543 に答える