Отображение / скрытие DIV на основе одного или нескольких флажков / радиобоксов?

Question

Ранее я задавал подобный вопрос, но он был настолько расплывчатым, что я не мог получить ответ, который хотел.

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

Например:

"How old is your computer?" 
Options: [x]One Year [ ] Two Years [ ] Three Years

Output: "Your computer is One year old"

Я хочу, чтобы эта функциональность распространялась на несколько отдельных флажков и радиобоксов ...?

Возможно ли это?

EDIT:

Это система рекомендаций по обновлению оборудования, которая учитывает текущую систему.

«В зависимости от вашей текущей системы вам необходимо заменить видеокарту и приобрести дополнительную оперативную память»

Какие могут использовать такие факторы, как «Сколько лет вашему компьютеру?», «Сколько оперативной памяти у вашего компьютера», «Какая версия DirectX вашей видеокарты» или что-то в этом роде.

Answer 1

Я бы настроил функцию синтаксического анализа, которая реагирует на каждое изменение любого из элементов формы и «компилирует» строку, содержащую биты информации.

Вы можете установить эту функцию для события "onchange" каждого элемента.

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

function parse_form()
 {

  var age_string = "Your computer is"

  var age = document.getElementById("age").value;
  if (age == 1) age_string+= "one year old";
  if (age > 1) age_string+= "more than one year old";

... and so on.

 }

Answer 2

Вам потребуется способ связать каждый флажок с информацией, которую вы хотите показать. Например, вы можете объединить имя и значение, чтобы получить отображаемый идентификатор, предполагая, что значения являются символами, действительными в идентификаторе:

<input type="radio" name="age" value="1" /> One year
<input type="radio" name="age" value="2" /> Two years
<input type="radio" name="age" value="3" /> Three years

<div id="age-1"> Your computer is awesome!! </div>
<div id="age-2"> Your computer is so-so </div>
<div id="age-3"> Your computer sucks </div>

Теперь вам просто нужно немного скрипта, чтобы связать их вместе:

function showElementsForInputs(inputs) {

    // Set the visibility of each element according to whether the corresponding
    // input is checked or not
    //
    function update() {
        for (var i= inputs.length; i-->0;) {
            var input= inputs[i];
            var element= document.getElementById(inputs[i].name+'-'+inputs[i].value);
            element.style.display= input.checked? 'block' : 'none';
        }
    }

    // Set the visibility at the beginning and also when any of the inputs are
    // clicked. (nb. use onclick not onchanged for better responsiveness in IE)
    //
    for (var i= inputs.length; i-->0;)
        inputs[i].onclick= update;
    update();

}

showElementsForInputs(document.getElementById('formid').elements.age);

Answer 3

<span id='#options'>
  Options:
  <input type='radio' name='options' value='one'>One Year</input>
  <input type='radio' name='options' value='two'>Two Years</input>
  <input type='radio' name='options' value='three'>Three Years</input>
</span>
Output: "<span id='#output'></span>"

...

var labels = { 
  one: "Your computer is One Year Old",
  two: "Your computer is Two Years Old",
  three: "Your computer is Three Years Old"
};

$('#options :radio').click(function() {
   $('#output).html(labels[$(this).val()]);
});

Answer 4

Вот пример с jQuery, который будет соответствовать вашим потребностям.

// no tricks here this function will run as soon as the document is ready.
$(document).ready(function() {
    // select all three check boxes and subscribe to the click event.
    $("input[name=ComputerAge]").click(function(event) { 
        var display = $("#ComputerAgeTextDisplay"); // # means the ID of the element
        switch (parseInt(this.value)) // 'this' is the checkbox they clicked.
        {
            case 1:
                display.html("Your computer is one year old."); 
                break; 
            case 2:
                display.html("Your computer is two years old."); 
                break; 
            case 3:
                display.html("Your computer is three years old."); 
                break; 
            default:
                display.html("Please select the age of your computer."); 
                break;   
        }
    });
});

Answer 5

Обычный jQuery click listener подойдет. Делая некоторые предположения о вашем HTML-коде (что вы используете радио-кнопки ввода с тегами меток, чьи атрибуты for соответствуют идентификаторам радио-кнопок):

$("#options input").click(function(){
    var optionID= $(this).attr(id);
    var outputText= $("label[for="+optionID+"]");
    $("#output").text(outputText);
});

Этот код выполнит почти то, что вы хотите. Если вам нужны отдельные DIV для каждого конкретного выходного сообщения, просто создайте div для каждого класса output, скажем, с атрибутом rel, соответствующим идентификатору кнопки ввода, а затем:

$("#options input").click(function(){
    var optionID= $(this).attr(id);
    $("div.output[rel!="+optionID+"]").slideUp(function(){
        var outputDiv= $("div[rel="+optionID+"]");
    });
});

Этот код можно улучшить, улучшив обработку ситуаций, в которых повторно выбирается уже выбранная опция (попробуйте ... могут происходить странные вещи), или если щелчки происходят очень быстро.

Альтернативно, вы можете просто использовать обычный атрибут onclick для переключателей ввода, если вы просто хотите придерживаться нативного Javascript. Если вас интересует соответствующий код для этого, оставьте комментарий, и кто-то обязательно сможет вам помочь.