複数のチェックボックスに基づいてdivの表示を切り替える

Question

複数のチェックボックスがあります。それらのいずれかをチェックすると、divが表示されます。それらをチェックしないままにするとdivが非表示になります。ニック（http://stackoverflow.com/questions/4337378/toggle-div-based-on-checkbox-value）のおかげで、私はdivをトグルするために複数のチェックボックスが必要になることを除けば、ほぼ動作します。

HTML：

<div id="somediv"> 
<input type="checkbox" class="form-checkbox" value="a" name="a"> 
<input type="checkbox" class="form-checkbox" value="b" name="b"> 
<input type="checkbox" class="form-checkbox" value="c" name="c"> 
<input type="checkbox" class="form-checkbox" value="d" name="d"> 
</div> 

<div id="tog">tog content</div> 

のjQuery：

 var tog = $("#tog").hide(); 
     $('#somediv .form-checkbox').change(function() {    
      if ($(tog).css('display') == 'none') { 
      tog.show(); 
      }  
     }); 

もう1：

 var tog = $("#tog").hide(); 
     $('#somediv .form-checkbox').change(function() {     
      $(tog).toggle(this.checked); 
     }).change(); 

私は何をしないのですか？ 問題の1つ（すべてではない）のチェックボックスをオフにするとdivが非表示になります。 何もチェックされていない場合にのみ必要です。デフォルトでは隠されています。 これがチェックされている場合は、表示しておきます。トグルは表示されません。

どのようなヒントも非常に高く評価されます。 ありがとう

Answer 1

TRY -

var tog = $("#tog").hide(); 
$('#somediv .form-checkbox').change(function() {     
    $(tog).toggle($('.form-checkbox:checked').length > 0); 
}).change(); 

デモ - http://jsfiddle.net/VA4NP/

これは非常にsimilaです：

var tog = $("#tog").hide(); 
$('#somediv .form-checkbox').change(function() { 
    if($('#somediv .form-checkbox').is(':checked').length > 0) 
    { 
     $(tog).show(); 
    } 
    else 
    { 
     $(tog).hide(); 
    } 
}).change(); 

Answer 2

あなたは近いといえます。変更イベントが行っていることは、チェックされたチェックボックスまたはチェックされていないチェックボックスのチェックされたステータスのみを考慮に入れていることです。したがって、変更イベントでは、チェックボックスのいずれかがチェックされているかどうかを確認するだけです。

たぶん、このような何か：

var tog = $("#tog").hide(); 
    $('#somediv .form-checkbox').change(function() { 
     if ($('#somediv .form-checkbox').is(':checked').length > 0) { 
     tog.show(); 
     } else { 
     tog.hide(); 
     } 
    }); 

Answer 3

ようなもので試してみてくださいrを2番目のコードサンプルに追加します。これは、トグル関数に渡される引数として$('.form-checkbox:checked').length > 0を使用します。これは、いずれかのチェックボックスがオンの場合にtrueを返す必要があります。ここで注意すべき

var tog = $("#tog").hide(); 
$('#somediv').change(function(){ 
    if($('#somediv').find('input:checked').length === 0) 
    { 
     tog.hide(); 
    } 
    else 
    { 
     tog.show(); 
    } 
}); 

2つのこと：

Answer 4

は、この試してみて。まず、セレクタを再実行する代わりに$(this).findを使用することができます。私は、thisがこの場合に指していることを100％確信していません（divまたはチェックボックス）。第2に、イベントをサブスクライブする入力が入ったコンテナがある場合、親オブジェクトにリスナーを接続する方がはるかに効率的です。チェックボックスからの変更イベントはdivにバブルアップします。