Скрыть / показать несколько делений

Question

Я пытаюсь создать форму, в которой есть различные скрытия / раскрытия, и одна из последних частей, которую мне нужно сделать с этой формой, - это ПОКАЗАТЬ поля информации о платеже, когда выбрана только Кредитная карта.

У меня есть тестовая страница настройки здесь: http://www.faa.net.au/test/femmes-member-form.html

Процесс на данный момент таков:

1. Введите ваши данные
2. Выберите дату события
3. Выбор участника + 1 или более гостей запрашивают детали оплаты
4. На данный момент я отобразил 3 DIV, которые я хочу отображать, в зависимости от сделанного выбора радио, но когда я скрываю их, код, который я сейчас использую, не работает.

Может ли кто-нибудь помочь мне здесь, пожалуйста?

Если вам нужен код, пожалуйста, дайте мне знать, с множеством различных элементов, которые я не хотел вставлять сюда целиком, надеюсь, вы видите исходный код?

Вот тот Javascript, который у меня есть в настоящее время, но я не уверен, что это неправильно, или столкновение с чем-то другим?

        <script type="text/javascript">
        $(function() {
            $('.cat_dropdown').change(function() {
                $('#payMethod').toggle($(this).val() >= 2);
            });
        });     
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".payOptions").click(function () {
                $(".paymentinfo").hide();
                switch ($(this).val()) {
                    case "Credit Card Authorisation":
                        $("#pay0").show("slow");
                        break;
                    case "Direct Deposit":
                        $("#pay1").show("slow");
                        break;
                    case "Cash Payment (FAA Office)":
                        $("#pay2").show("slow");
                        break;
                }
            });
        });
    </script>

Answer 1

В соответствии с просмотром кода из View Souce и предположением, что вы не добавили правильный класс в обработчик событий. таким образом, событие click для радио не вызывается.

+ Изменить

$(".payOptions").click(function () {

в

$(".paymentmethod").click(function () {

Answer 2

Используется для jquery, как это

Css

#pay0, #pay1, #pay2{display:none;}

Jquery

$(document).ready(function(){

    $('#payment').change(function(){
        if($('#CAT_Custom_255277_0').attr('checked')){
            $('#pay0').show();
            $('#pay1').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_1').attr('checked')){
            $('#pay1').show();
            $('#pay0').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_2').attr('checked')){
            $('#pay2').show();
            $('#pay0').hide();
            $('#pay1').hide();
        }
    });

});

демонстрация

Answer 3

Вы не разместили ни одного источника, но если вы используете jQuery, вы можете просто сделать:

$(".commonclass").hide();

При условии, что все 3 div имеют класс "commonclass".

Answer 4

Процесс идет примерно так:

• Начать с чистого листа: скрыть все способы оплаты
• Ваши радиовходы имеют paymentmethod класс, поэтому присоедините слушатель события изменения к этим элементам
• Когда выбрана одна из радиостанций, скрыть все способы оплаты, выбрать тот, который вы хотите показать, используя indexи покажи, что div

---

$('#pay0, #pay1, #pay2').hide();

$('input.paymentmethod').on('change', function(){
  $('#pay0, #pay1, #pay2').hide();
  var selected = $('input.paymentmethod').index($('input.paymentmethod:checked'));
  $('#pay'+selected).show();
});

Answer 5

Насколько я понимаю, вы пытаетесь, как показано ниже,

1. выберите значение из dropdownесли value !== "1" затем показать кнопки оплаты
2. На основе radio Выбор кнопки, вы хотите показать соответствующий div

Из просмотра вашего исходного кода, кажется, вы используете jQuery lib и там использую это

$(document).ready(function() {
    $('input[type=dropdown]').on('change', function(){
        if($(this).val() !== 1)
            {
                $('input[type=radio]').show();
            }
    }

    $('input[type=radio]').on('change', function(){
        if($(this).val() === "Credit Card Authorisation") {
            $('#pay1').hide();
            $('#pay2').hide();
            $('#pay0').show();
        }
        else if($(this).val() === "Direct Deposit"){
            $('#pay0').hide();
            $('#pay2').hide();
            $('#pay1').show();
        }
        else if($(this).val() === "Cash Payment (FAA Office)"){
            $('#pay0').hide();
            $('#pay1').hide();
            $('#pay2').show();
        }   
    });
});

Надеюсь, вы понимаете.