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

常规jQuery click listener会这样做。对你的HTML代码做一些假设（你正在使用带有标签标签的无线电输入按钮，其属性对应于单选按钮的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 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);

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

5 个答案: