根据一个或多个复选框/单选框选择显示/隐藏 DIV？

Question

我之前问过一个类似的问题，但它太模糊了，我不可能得到我想要的答案。

基本上，我希望用户能够从多个选项中进行选择，并根据选择显示各种信息。

例如：

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

Output: "Your computer is One year old"

我希望该功能扩展到多个单独的复选框和单选框...？

这可能吗？

编辑：

它适用于考虑您当前系统的硬件升级推荐系统。

“基于您当前的系统，您需要更换显卡并购买额外的内存”

这可以使用诸如 “您的计算机几岁了？”、“您的计算机有多少 RAM”、“您的显卡是什么 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

您需要一种方法将每个复选框与您想要显示的信息相关联。例如，您可以结合名称和值来获取要显示的 ID，假设这些值是在 ID 中有效的字符：

<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

普通的jQuery click listener 就可以了。对您的 HTML 代码进行一些假设（您使用带有标签标签的单选输入按钮，其 for 属性对应于单选按钮的 ID）：

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

这段代码几乎可以完成您想要的。如果您想为每个特定的输出消息创建单独的 DIV，只需创建每个具有 output 类的 div，假设 rel 属性对应于输入按钮的 ID，然后：

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

可以通过更好地处理重新单击已选择的选项（尝试一下...可能会发生奇怪的事情）或点击发生非常快的情况来改进此代码。

或者，如果您只想坚持使用本机 Javascript，则可以将常规 onclick 属性用于输入单选按钮。如果您对相应的代码感兴趣，请发表评论，一定会有人帮助您。

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

<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()]);
});