jQuery-使用复选框切换文本_Jquery_Jquery Ui

jQuery-使用复选框切换文本

jquery jquery-ui

jQuery-使用复选框切换文本,jquery,jquery-ui,Jquery,Jquery Ui,我一直在使用jQuery代码源代码：并尝试添加一个切换函数，以便在单击时，某些文本将隐藏/取消隐藏我在这方面有点先发，所以不确定我是否朝着正确的方向前进 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Checkboxes</title> <link rel="styleshe

我一直在使用jQuery代码源代码：并尝试添加一个切换函数，以便在单击时，某些文本将隐藏/取消隐藏

我在这方面有点先发，所以不确定我是否朝着正确的方向前进

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Checkboxes</title>
  <link rel="stylesheet"     href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
  });
  </script>

<script>
$( "#check1" ).click(function() {
  $( "#text1" ).toggle();
});
</script>

  <style>
  #format { margin-top: 2em; }
  </style>
</head>
<body>
<div id="format">
  <input type="checkbox" id="check1"><label for="check1">Option 1</label>
  <input type="checkbox" id="check2"><label for="check2">Option 2</label>
  <input type="checkbox" id="check3"><label for="check3">Option 3</label>
</div>
</body>
</html>
<p id="text1">Hello</p>
<p id="text2">Bye</p>
<p id="text3">Other</p

所以我尝试在这里添加.toggle部分，但我无法让它做任何事情。这可能是由于我如何尝试识别事物-如果是这样，我如何才能做到这一点，使其工作

当我让它工作时，我必须添加更多切换条件，以便：选择选项1时，文本1、文本2、文本3均显示选择选项2仅显示文本1和文本2 选择选项3仅显示文本2和文本3

如果需要澄清，请告诉我。在此方面的任何帮助都将不胜感激

-谢谢

我想用一段代码直接回答您的问题，但是您的代码中有一些结构问题需要先解决。事实上，您拥有的代码已经可以工作了，您只需要稍微更改一下文档的结构

首先，您的元素需要位于文档的标记内。当前将它们放在元素外部的方式不是有效的HTML

其次，您的javascript需要位于身体底部。一旦浏览器遇到Javascript，就会立即执行它，因此按照当前编写代码的方式，您正在尝试使用jQuery来选择尚未创建的元素

以下是您的代码的修订版：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Button - Checkboxes</title>
      <link rel="stylesheet"     href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">


      <style>
      #format { margin-top: 2em; }
      </style>
    </head>
    <body>
    <div id="format">
      <input type="checkbox" id="check1"><label for="check1">Option 1</label>
      <input type="checkbox" id="check2"><label for="check2">Option 2</label>
      <input type="checkbox" id="check3"><label for="check3">Option 3</label>
      <p id="text1">Hello</p>
      <p id="text2">Bye</p>
      <p id="text3">Other</p>
      <script>
      $(function() {
          $( "#check" ).button();
          $( "#format" ).buttonset();
      });
      $( "#check1" ).click(function() {
          $( "#text1" ).toggle();
      });
      </script>
    </div>
    </body>
    </html>

更新你的代码如下

使用数据属性引用文本元素id标记id。

简短的代码

$( "input[id^=check]" ).click(function() {
    textbox = $(this).attr('id').replace("check","text");    
    $("#"+textbox).toggle();
 });

可能是你想要这张$check.button。。。我认为那没什么用。嗨，贾德卡特，下面的答案解决了你的问题吗？如果没有，您是否愿意提供更多信息/背景？如果是，请将一个或多个答案标记为有用，并选择一个作为接受答案。谢谢。这是迄今为止最聪明/最优雅的解决方案。加一。但他首先应该实施其他答案提供的建议。我听说了。数据“id”是这里的最佳实践：@Jadecat很高兴我们能在这个问题上帮助你！要将答案标记为已接受答案，请单击答案旁边的复选标记，将其从空心切换为绿色。

 $( "input[id^=check]" ).click(function() {
   $( "#"+$( this ).data('id') ).toggle();
 });

$( "input[id^=check]" ).click(function() {
    textbox = $(this).attr('id').replace("check","text");    
    $("#"+textbox).toggle();
 });