如何在單選按鈕上顯示文本

我的目標是構建一個腳本，該腳本將根據單擊的單選按鈕顯示頁面上的不同段落。第一階段是構建一個腳本，當單擊其中一個按鈕時，該腳本將僅顯示單個文本。從關於這個的閱讀看來，你應該能夠通過使用輸入元素的ID和'檢查來識別哪個按鈕被點擊。請注意，我期待依靠這些ID，以便我知道要顯示哪些文本。但是，下面的代碼無法正常工作，並且正在努力查看缺失的新手。請注意，對於看似簡單的方法，我在開始時顯示頁面上的文本，然後希望在單擊按鈕時隱藏文本。如何在單選按鈕上顯示文本

該腳本

<script type="text/javascript"> 
    $(document).ready(function() { 
    if($('input:checked #category1')) { 
     $("#hideCategory1").hide(); 
      }; 
     });

輸入部分是：

 <form name="categories" action="" method="post"> 
    <h2>Categories 
    </h2> 
    <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p> 
    <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p> 
    <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p> 
    </form>

CSS是

#hideCategory1 { 
visibility: visible;

}

文字部分是

<p id="hideCategory1" class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

我會很感激，爲什麼這可能是失敗，如何糾正它的指針。

請注意，當我開始這個時，我期待使用「更改」來檢測哪個按鈕被點擊。然而，我在幾處地方看到，「改變」功能有時會遇到IE的問題 - 但我不知道。

感謝

UPDATE：根據埃德加的迴應我逆轉的過程，並增加了一個行點擊一個單選按鈕時，所有的文字重置爲隱藏。初步測試表明這是按預期工作。

$(document).ready(function() { 
    $("#hideCategory1, #hideCategory2, #hideCategory3").hide(); //Hide all forms 
$(":radio[name='category']").click(function(){ 
    $("#hideCategory1, #hideCategory2, #hideCategory3").hide();//on click rehide all the forms 
    switch($(this).attr("id")){//Select the form based on the radio button that was clicked. 
     case "category1": $("#hideCategory1").show(); break; 
     case "category2": $("#hideCategory2").show(); break; 
     case "category3": $("#hideCategory3").show(); break; 
    } 
}); 
});

謝謝。

來源

2011-05-06 dorich

我不明白你是否要顯示或隱藏段落。無論如何，這段代碼隱藏了與單擊單選按鈕相對應的段落。在這裏你有：

<html> 
<body> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function() { 
    $(":radio[name='category']").click(function(){ 
     $("#hideCategory1, #hideCategory2, #hideCategory3").show(); //Show all paragraphs first. 
     switch($(this).attr("id")){ 
      case "category1": $("#hideCategory1").hide(); break; 
      case "category2": $("#hideCategory2").hide(); break; 
      case "category3": $("#hideCategory3").hide(); break;   
     } 
    }); 
}); 
</script> 

<form name="categories" action="" method="post"> 
    <h2>Categories 
    </h2> 
    <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p> 
    <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p> 
    <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p> 
</form> 
    <p id="hideCategory1"> Paragraph 1 </p> 
    <p id="hideCategory2"> Paragraph 2 </p> 
    <p id="hideCategory3"> Paragraph 3 </p> 
</body> 
</html>

希望這會有所幫助。乾杯

來源

2011-05-06 06:58:54

道歉的混亂職位。最終我想透露點擊文字。我只是在開發過程中逆轉了這個過程，因爲我認爲我可以更容易地檢測到發生了什麼。感謝這個解決方案，它可以隱藏文本，但是當我在腳本中反轉隱藏/顯示時，它不會執行這項工作，因爲一旦點擊了按鈕，當您單擊另一個按鈕時，文本就會顯示。所以我會努力添加一些內容來隱藏之前顯示的任何文本。謝謝。 – dorich 2011-05-06 16:51:53

查看我的更新以獲取解決方案 – dorich 2011-05-06 17:54:21

如何在單選按鈕上顯示文本

回答

相關問題