1

以下の5つのチェックボックスがすべて選択されるまで、jQueryを使用してdivを非表示にする必要があります。私はこれを単一のチェックボックスに対して行う方法を知っていますが、複数のチェックボックスに対しては知りません。

これは私がこれまでに持っているものです。

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb2">
<input type=checkbox id="cb3" name="cb3">
<input type=checkbox id="cb4" name="cb4">
<input type=checkbox id="cb5" name="cb5">

<div id="hidden">some stuff</div>

以下のjQueryは、1つのチェックボックスが選択されていない/選択されていない場合にのみdivを非表示/表示します。

('#hidden').hide();
$('#cb1').click(function() {
    if($('#cb1').is(':checked'))
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});
4

7 に答える 7

3

チェックボックスに共通のクラスを追加する場合、他のチェックボックスがページに存在する場合に役立つことがあります。簡単にするために、$（'：checkbox'）セレクターを使用しています

var $checks=$(':checkbox').change(function(){
      var allChecked= $checks.filter(':checked').length == $checks.length;
    $('#hidden').toggle( allChecked); /*passing a boolean will tell whether to hide or show*/

})
于 2012-11-11T18:41:43.907 に答える
2

ここでは、cbで始まるチェックのいずれかをクリックします-他の回答から切り替えます

$(function() {
  var CBS = $('input[name^="cb"]');
  CBS.click(function() {
    var show = $('input[name^="cb"]:checked').length==CBS.length;
    $('#hidden').toggle(show); // better solution than show/hide
  }​);​
}​);​

デモ

于 2012-11-11T18:38:29.157 に答える
2

すべてのチェックボックスをオンにする必要がある場合は、次のコードを使用します。

if ($('input:checked').length === 5 /* number of checkboxes */) { ... }

それらのいくつかが必要な場合：

var checkedIds = $('input:checked').map(function() {
   return this.id;
}).get();
var neededIds = ['ch1', 'ch2' /*, ... */];
if (checkedIds.toString() === neededIds.toString()) { ... }
于 2012-11-11T18:38:42.210 に答える
1

ただ行う：

$('[id^=cb]').click(function() {
    if(! $('[id^=cb]:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

ここでは`[id^=cb]、「cb」文字列で始まるidを持つすべての要素を選択し、それらをクリックするたびに、チェックされていない要素があるかどうかを確認し、ない場合はdivを表示します。

更新：:unchecked jQueryにセレクターがないという事実をサポートするために、上記のコードを更新しました。代わり:not(:checked)に使用する必要があります。これに注目してくれたKirillIvlevに感謝します。

于 2012-11-11T18:38:54.043 に答える
1

私が正しく読んだ場合、すべてのチェックボックスがチェックされている場合にのみdivを表示したいと思います。jsfiddleを作成しましたが、コードは次のとおりです。

http://jsfiddle.net/jyw9n/

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb2">
<input type=checkbox id="cb3" name="cb3">
<input type=checkbox id="cb4" name="cb4">
<input type=checkbox id="cb5" name="cb5">

<div id="hidden">some stuff</div>

$('#hidden').hide();
$('input:checkbox').click(function() {
    if(!$('input:checkbox:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});
于 2012-11-11T18:39:18.983 に答える
0

あなたの論理に従ってこのようなものも機能するはずですが、mplungjanIdeaはこれよりも優れています。

$(function() {

$("input").click(function() { 
    if($("#cb1").is(":checked") && $("#cb2").is(":checked")  && $("#cb3").is(":checked") &&  $("#cb4").is(":checked") && $("#cb5").is(":checked"))
    {
        $('#hidden').hide();
    }
    else
    {
        $('#hidden').show();
    }   
});

  })
于 2012-11-11T18:44:57.707 に答える
0

私が理解したのは、複数のチェックボックスを比較してdivを非表示または表示したいということです。3つのチェックボックスが選択されている場合にのみdivを表示するとします。

簡単な方法は、チェックするすべてのチェックボックスに同じ名前を付け、クリック時に関数をバインドして、チェックされているかどうかに関係なく、3つのチェックボックスすべてをチェックすることです。3つすべてがチェックされている場合、show divelsehide。

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb1">
<input type=checkbox id="cb3" name="cb1">
<input type=checkbox id="cb4" name="cb2">
<input type=checkbox id="cb5" name="cb3">
<div id="hidden">some stuff</div>  

<script>
var $hiddenDiv=$('#hidden');
var hideOrShowDivFlag=false
$('input[name=cb1]').click(function(){
    $("input['cb1']").each(function(){
    hideOrShowDivFlag=($(this).is(":checked"))?true:false
    })
    (hideOrShowDivFlag)?$hiddenDiv.show():$hiddenDiv.hide();
});

このコードは、指定されたチェックボックスの任意のセットに対して実行できます。それらに同じ名前または共通の属性を付けたことを確認してください。

于 2012-11-11T18:49:59.883 に答える