如何在单击单选按钮时显示文本

发布于 2024-11-05 13:26:53 字数 2356 浏览 4 评论 0原文

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

谢谢。

原文

My goal is to build a script that will reveal different paragraphs on a page, depending on the radio button that is clicked.
The first stage is to build a script that will simply reveal one piece text when one of the buttons is clicked.
From reading about this it appears that you should be able to identify which button is clicked by using the ID of the input element and 'checked. Note that I'm anticipating relying on the ID's so that I know which text to reveal.
However, the following code is not working and being a neophyte I'm struggling to see what's missing. Note that for what seems a simpler approach at the beginning I'm showing the text on the page and then want the text to hide when the button is clicked.

The script is

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

The input section is:

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

#hideCategory1 {
visibility: visible;

}

Text Section is

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

I'd appreciate any pointers on why this might be failing and how to correct it.

Note that when I started this I was anticipating using "change" to detect which button was clicked. However, I read in several places that the "change" function sometimes has problems with IE - but I don't know.

Thanks

UPDATE:
Based on Edgar's response I reversed the process and added one more line that resets all the text to hidden when a radio button is clicked. Initial tests show this to be working as expected.

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

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花坊 2024-11-12 13:26:53

我不明白你是想显示还是隐藏这些段落。无论如何，这段代码隐藏了与单击的单选按钮对应的段落。在这里：

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

希望这会有所帮助。干杯

I didn't understand if you want to show or hide the paragraphs. Anyway, this code hides the paragraph corresponding to the radiobutton clicked. Here you have:

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

Hope this helps. Cheers

回复收藏 0 原文

~没有更多了~