Получение переменных из нескольких радиоблоков и раскрытие контента с помощью jquery - PullRequest
Новая
       1

Получение переменных из нескольких радиоблоков и раскрытие контента с помощью jquery

0 голосов
/ 28 июня 2011

Ладно, я довольно новичок во всем jquery, некоторые готовят, но я застреваю, возможно, я не ищу правильные вещи, но здесь идет ...

У меня есть форма с двумя группами радиоблока по 3 (в настоящее время выбор номера и выбор альфа). Я пытаюсь сделать так, чтобы пользователь выбрал один вариант для каждого набора и возвратил соответствующий результат в.

Таким образом, всего будет 9 возможных комбинаций (одна AY, одна BEE, одна CEE, две Ay ... и т. Д.).

Полагаю, мне нужно несколько вещей:

  1. Чтобы найти значения двух выбранных переключателей
  2. Обработать это значение
  3. Показать правильное содержание относительно значения
  4. Разрешить пользователям изменять свой выбор, показывать и скрывать каждый по мере необходимости (я хотел бы, чтобы это произошло, как только будут выбраны две опции, если это возможно, но кнопка 'submit' будет в порядке)

Вот что у меня есть:

HTML-форма 

<p>Number Selection</p>

<p> 
<input type="radio" name="r1" value="one"> one <br />
<input type="radio" name="r1" value="two"> two <br />
<input type="radio" name="r1" value="three"> three <br />
</p>

<p>Alpha Selection</p>

<p>
<input type="radio" name="r2" value="AY"> AY <br />
<input type="radio" name="r2" value="BEE"> BEE <br />
<input type="radio" name="r2" value="CEE"> CEE <br />

</p>

</form>

HTML DIV's 

<div class="oneAY" style="display:none;">one AY</div>
<div class="oneBEE" style="display:none;">one BEE</div>
<div class="oneCEE" style="display:none;">one CEE</div>

<div class="twoAY" style="display:none;">two AY</div>
<div class="twoBEE" style="display:none;">two BEE</div>
<div class="twoCEE" style="display:none;">two CEE</div>

<div class="threeAY" style="display:none;">three AY</div>
<div class="threeBEE" style="display:none;">three BEE</div>
<div class="threeCEE" style="display:none;">three CEE</div>

СЦЕНАРИЙ (просто определение каждого результата может быть далеко от цели) 

<script type=”"text/javascript>


            {
                case "0":
                    document.getElementById("oneAY").style.display="block";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "1":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="block";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "2":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="block";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "3":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="block";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "4":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="block";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "5":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="block";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "6":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="block";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "7":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="block";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "8":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="block";
                break;


</script>

Ответы [ 2 ]

1 голос
/ 28 июня 2011

Хорошо, сначала я бы дал все div общий класс, скажем, content: 

<div class="oneAY content" style="display:none;">one AY</div>
...

<div class="twoAY content" style="display:none;">two AY</div>
...

Тогда скрыть и показать их довольно просто.Необходимо зарегистрировать обработчик события для события change переключателей, получить значение выбранных кнопок и отобразить соответствующее div: 

$('input[name="r1"], input[name="r2"]').change(function() {
    var r1val = $('input[name="r1"]:checked').val(),
        r2val = $('input[name="r1"]:checked').val();

    if(r1val && r2val) {
        $('.content').hide();
        $('.' + r1val + r2val).show();
    }
});

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

DEMO

Предлагаю прочитать

0 голосов
/ 28 июня 2011

Вот, пожалуйста: 

var $radioList = $('input[type="radio"]');
$('input[type="radio"]').change(function() {
    var $r1 = $radioList.filter('[name="r1"]:checked');
    var $r2 = $radioList.filter('[name="r2"]:checked');
    if($r1.length > 0 && $r2.length > 0) {
        $('div').hide();
        $('.' + $r1.val() + $r2.val()).show();
    }
});

И здесь - это jsFiddle test case

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...