Javascript 基于一个或多个复选框/无线框选择显示/隐藏DIV？

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

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

例如：

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

Output: "Your computer is One year old"

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

这可能吗

编辑：

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

根据您当前的系统，您需要更换图形卡并购买额外的RAM

这可能需要一些因素，比如

---

“你的计算机有多旧？”、“你的计算机有多少RAM”、“你的图形卡是什么directX版本”之类的东西。

我会设置一个解析函数，对任何表单元素中的每一个更改作出反应，并“编译”包含信息位的字符串

您可以将此函数设置为每个元素的“onchange”事件

解析函数的外观实际上取决于您想要实现什么。它可能是这样的：（故意忽略特定于框架的函数）

---

我将设置一个解析函数，该函数对任何表单元素中的每一个更改作出反应，并“编译”包含信息位的字符串

您可以将此函数设置为每个元素的“onchange”事件

解析函数的外观实际上取决于您想要实现什么。它可能是这样的：（故意忽略特定于框架的函数）

一个普通的就行了。对HTML代码做一些假设（您正在使用带有标签标签的单选输入按钮，其for属性对应于单选按钮的ID）：

这段代码将完全实现您想要的功能。如果您想为每个特定的输出消息创建单独的div，只需使用class

output

创建div，例如使用与输入按钮ID对应的

rel

属性，然后：

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

这段代码可以通过更好地处理已经选择的选项被重新点击的情况（试试吧……可能会发生奇怪的事情），或者如果点击发生得很快的情况来改进

或者，如果您只想坚持使用本机Javascript，则可以对输入单选按钮使用常规的

onclick

属性。如果您对相应的代码感兴趣，请发表评论，肯定会有人能帮您解决问题。

。对HTML代码做一些假设（您正在使用带有标签标签的单选输入按钮，其for属性对应于单选按钮的ID）：

这段代码将完全实现您想要的功能。如果您想为每个特定的输出消息创建单独的div，只需使用class

output

创建div，例如使用与输入按钮ID对应的

rel

属性，然后：

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

这段代码可以通过更好地处理已经选择的选项被重新点击的情况（试试吧……可能会发生奇怪的事情），或者如果点击发生得很快的情况来改进

---

或者，如果您只想坚持使用本机Javascript，则可以对输入单选按钮使用常规的

onclick

属性。如果您对相应的代码感兴趣，请发表评论，肯定会有人帮您解决问题。

下面是一个适合您需要的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;   
        }
    });
});

---

下面是一个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;   
        }
    });
});

选项：
一年
两年
三年
输出：“”
...
变量标签={
一：“你的电脑已经一年了”，
第二：“你的电脑已经使用两年了”，
三：“你的电脑已经三年了”
};
$（“#选项：收音机”）。单击（函数（）{
$（'#output）.html（标签[$（this.val（））；
});

选项：
一年
两年
三年
输出：“”
...
变量标签={
一：“你的电脑已经一年了”，
第二：“你的电脑已经使用两年了”，
三：“你的电脑已经三年了”
};
$（“#选项：收音机”）。单击（函数（）{
$（'#output）.html（标签[$（this.val（））；
});

您需要一种方法将每个复选框与要显示的信息关联起来。例如，您可以组合名称和值以获得要显示的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>

---

您需要一种方法将每个复选框与要显示的信息关联起来。例如，您可以组合名称和值以获得要显示的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>

---

我格式化为代码纯粹是为了可读性！要做到这一点，实际上有几十种方法。很难知道从哪里开始。不过，请查看jquery及其选择器，我认为这会给您带来很大的帮助。您可能需要更多的解释。如果用户为问题1选择选项1，为问题2选择选项2，那么输出是“您的计算机使用了一年，您选择了选项2”还是完全不同？与您所说的差不多。这是一个硬件建议“基于您当前的系统，您需要更换图形卡并购买额外的RAM”，这可能会使用诸如“您的计算机有多旧？”、“您的计算机有多少RAM”、“您的图形卡是什么directX版本”之类的因素。我将把这个添加到我的问题中。我格式化为代码纯粹是为了可读性！要做到这一点，实际上有几十种方法。很难知道从哪里开始。不过，请查看jquery及其选择器，我认为这会给您带来很大的帮助。您可能需要更多的解释。如果用户为问题1选择选项1，为问题2选择选项2，输出是否为“您的计算机已使用一年，您选择了选项？”

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);