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

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

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

Однако код, который я привел ниже, показывает/скрывает кнопку отправки DIV для каждого экземпляра флажка. Другими словами, если у меня есть три checkboxes CHECKED, и я UNCHECK один из них, кнопка Submit DIV будет скрыта.

Ваш экспертный совет более чем приветствуется!

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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

это шоу работ и скрытие

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

});

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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