根據一個或多個複選框/無線電框選擇顯示/隱藏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

你會需要一種方法來與你想顯示的信息每個複選框相關聯。例如，您可以結合的名稱和值來獲得一個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 2

我會設置一個解析函數，它對任何表單元素中的每個更改作出反應，並「編譯」包含信息位的字符串。

您可以將此函數設置爲每個元素的「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 3

定期jQuery click listener會做。使你的HTML代碼中的一些假設（您使用的無線輸入按鈕與標籤標籤，其爲屬性對應的單選按鈕的ID）：

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

該代碼將完成幾乎你想要什麼。如果你想爲每個特定的輸出消息中分離出來的DIV，剛剛創建的div每類output與假設對應於輸入按鈕的ID的rel屬性，那麼：

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