jQuery Show-Hide DIV, основанный на флажке Значение

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

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

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

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

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

источник

2010-12-14 mickormick

Помните, что если вы * показать * кнопка отправки с JS, вы должны также * шкура * кнопка с JS, так что люди без JavaScript Включить можно * все еще * использовать форму. Например, люди с экранными программами. –

Возможный дубликат [Toggle div на основе значения флажка] (http://stackoverflow.com/questions/4337378/toggle-div-based-on-checkbox-value) –

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

Изменить его

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

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

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

источник

2010-12-14 21:18:06

Большое спасибо! Работает как шарм! Некоторые люди просто получают его, в то время как другие любят меня! – mickormick

Если мы удалим «.length> 0», это не сработает, если есть 2 или более флажка и 2 или более контента для показа и скрытия. Но если добавить «.length> 0», это работает как шарм. Можете ли вы объяснить эту логику (будет простой, но я не могу понять). – Veer

@veer, потому что '$ ('. PChk: checked')' всегда возвращает объект jquery независимо от того, найден ли соответствующий элемент или нет. И объекты оцениваются как истинные в 'if' проверках. –

Вы могли бы рассмотреть вопрос об использовании :checked selector, предоставляемых JQuery. Что-то вроде этого:

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

источник

2010-12-14 21:20:15 Lee

Используя этот метод самостоятельно. – mirzu

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

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

источник

2012-04-16 11:08:03 raymosley

Я действительно не знаю, почему это так рекомендуется ... это неправильно. Вы проверяете текущий элемент только в то время, когда OP специально спрашивает, что скрытие должно происходить только в том случае, если элементы *** ALL *** '.pChk' не отмечены. Вы только что переписали код вопроса (* который лучше из-за прямого использования 'this.checked' вместо вашего использования jquery даже для этого .. *) –

Да, его неправильно ... –

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

он работает показать & скрыть

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

});

источник

2012-06-13 13:17:18 Vaishu

Я использую JQuery проп

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

источник

2013-09-03 10:30:10

Try это

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

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

источник

2014-05-20 09:20:00

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

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

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

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

источник

2017-01-23 17:58:01

jQuery Show-Hide DIV, основанный на флажке Значение

ответ

Смежные вопросы