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

Question

之前我曾问过类似的问题，但它如此模糊，以至于我无法获得想要的答案。

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

例如：

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

Output: "Your computer is One year old"

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

这可能吗？

编辑：

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

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

哪些可以使用诸如“您的计算机多旧？”，“计算机具有多少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

常规的jQuery Click侦听器即可 。 对HTML代码进行一些假设（您正在使用带有标签标记的单选按钮，它们的for属性对应于单选按钮的ID）：

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

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

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

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

另外，如果您只想使用本机Javascript，则可以仅对输入单选按钮使用常规的onclick属性。 如果您对适当的代码感兴趣，请发表评论，然后肯定有人可以为您提供帮助。

Answer 3

这是一个适合您需求的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 4

<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 5

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