web-dev-qa-db-ja.com

チェックボックス値に基づくjQuery Show-Hide DIV

AJAXを使用して、DIVに多数のチェックボックス（それぞれ独自の一意のID）を設定します。IDは "projectID1"、 "projectID2"、 "projectID3"などです... Iすべてのチェックボックスに「pChk」のクラスを与えました。

私の最終目標は、チェックボックスのいずれかがチェックされている場合、送信ボタンを含むDIVを表示することです。 [送信]ボタンを含むDIVが非表示になるのは、すべてのチェックボックスがオフになっている場合のみです。

ただし、下にあるコードでは、各チェックボックスインスタンスの送信ボタンDIVを表示/非表示しています。つまり、3つのチェックボックスをオンにして、そのうちの1つをオフにすると、送信ボタンDIVは非表示になります。

あなたの専門家のアドバイスは大歓迎です！

function checkUncheck() { 
    $('.pChk').click(function() {
        if (this.checked) {
            $("#ProjectListButton").show();
        } else {
            $("#ProjectListButton").hide();
        }
    }); 
}
jquerycheckboxshow-hide
23
mickormick

誰かが（検索を介して）再びこれに出くわした場合、これは古いですが。 jQuery 1.7以降の正しい答えは次のとおりです。

$('.pChk').click(function() {
    if( $(this).is(':checked')) {
        $("#ProjectListButton").show();
    } else {
        $("#ProjectListButton").hide();
    }
});
56
raymosley

JQuery propを使用します

$('#yourCheckbox').change(function(){
  if($(this).prop("checked")) {
    $('#showDiv').show();
  } else {
    $('#hideDiv').hide();
  }
});
15
Cybercarnage ｼ

これは、現在のチェックボックスのみをチェックしているためです。

に変更する

function checkUncheck() { 
    $('.pChk').click(function() {
        if ( $('.pChk:checked').length > 0) {
            $("#ProjectListButton").show();
        } else {
            $("#ProjectListButton").hide();
        }
    }); 
}

チェックボックスのいずれかがチェックされているかどうかを確認するには（この行のチェックのロット..）。

参照： http://api.jquery.com/checked-selector/

11
Gabriele Petrioli

ebdivはstyle="display:none;"

それは作品の表示と非表示です

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });

});
5
Vaishu

このプラグインのため、上記の答えはうまくいきません！

その場合は、onchange = "do_your_stuff（）;"を使用しますラベル上の例：あなたのチェックボックスはこちら

機能しない理由は、このJqueryが実際のチェックボックスの周囲に多くのオブジェクトを作成するため、変更されたかどうかを確認できないためです。

しかし、誰かがチェックボックスをまっすぐにクリックしても動作しません： '（

2
Marcelo Agimóvel

:checked selector 、jQueryによって提供されます。このようなもの：

$('.pChk').click(function() {
    if( $('.pChk:checked').length > 0 ) {
        $("#ProjectListButton").show();
    } else {
        $("#ProjectListButton").hide();
    }
});
2
Lee

これを試して

$('.yourchkboxes').change(function(){
    $('.yourbutton').toggle($('.yourchkboxes:checked').length > 0);
});

したがって、少なくとも1つのチェックボックスがチェックされているかどうかがチェックされます。

0
UI Dev