JQuery Show-Hide DIV на основе значения флажка

Question

Используя AJAX, я заполняю DIV набором флажков (каждый со своим уникальным идентификатором). Идентификаторы: «projectID1», «projectID2», «projectID3» и т. Д. Я дал всем флажкам класс «pChk».

Моя конечная цель - показать DIV, содержащий кнопку «Отправить», если установлен ЛЮБОЙ из флажков. Единственный раз, когда DIV, содержащий показ кнопки «Отправить», скрыт, это если все флажки сняты.

Однако код, который я создал ниже, показывает / скрывает кнопку Submit DIV для каждого экземпляра флажка. Другими словами, если у меня есть три флажка ПРОВЕРЕНО и я ОТКЛЮЧЕН один из них, кнопка «Отправить» DIV будет скрыта.

Ваш совет специалиста приветствуется!

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

Answer 1

Пока это старо, если кто-то сталкивается с этим снова (через поиск). Правильный ответ с jQuery 1.7 и далее:

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

Answer 2

Я использую jQuery prop

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

Answer 3

Это потому, что вы проверяете только текущий флажок.

Измените его на

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

, чтобы проверить, установлен ли какой-либо из флажков ( много проверок в этомстрока .. ).

ссылка: http://api.jquery.com/checked-selector/

Answer 4

ebdiv установлен style="display:none;"

это работает показать и скрыть

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

});

Answer 5

Совет всем людям, которые используют плоский красный, плоский зеленый, потому что из-за этого плагина ответы выше не сработают!

В этом случае используйте onchange = "do_your_stuff ();"на этикетке, например: Ваш флажок здесь

Причина, по которой он не работает, заключается в том, что этот Jquery создает много объектов вокруг реального флажка, поэтому вы не можете видеть, изменился он или нет.

Но если кто-то нажмет прямо на флажок, работать не будет: '(

Answer 6

Вы можете рассмотреть возможность использования селектора :checked , предоставляемого jQuery.Как то так:

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

Answer 7

Попробуйте это

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

Таким образом, он будет проверять, установлен ли хотя бы один флажок или нет.