Question

我的目标是构建一个脚本，根据单击的单选按钮显示页面上的不同段落。第一个阶段是构建一个脚本，当单击其中一个按钮时，该脚本将显示单个文本。从阅读中看来，您应该能够通过使用输入元素的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问题 - 但我不知道。

由于

更新：基于埃德加的回答，我改变了这个过程并添加了一行，当点击一个单选按钮时，该行将所有文本重置为隐藏。初步测试表明这是按预期工作的。

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

感谢。

Answer 1

我不明白你是否要显示或隐藏段落。无论如何，此代码隐藏了与单击的radiobutton相对应的段落。你有：

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

希望这会有所帮助。干杯

如何通过单击单选按钮显示文本

1 个答案: