Javascript 在velocity宏中使用复选框显示隐藏Div_Javascript_Jquery_Velocity

Javascript 在velocity宏中使用复选框显示隐藏Div

javascript jquery

Javascript 在velocity宏中使用复选框显示隐藏Div,javascript,jquery,velocity,Javascript,Jquery,Velocity,当选中velocity宏中的复选框时，我试图显示一个div部分。下面是velocity宏中定义的复选框的代码 <div class="s30"> <input type="hidden" value="false" name="_abcd"> <input type="checkbox" value="true" name="abcd" id="abcd"> <label for="abcd">I have

当选中velocity宏中的复选框时，我试图显示一个div部分。下面是velocity宏中定义的复选框的代码

<div class="s30">
<input type="hidden" value="false" name="_abcd">
<input type="checkbox" value="true" name="abcd" id="abcd">
                    <label for="abcd">I have seen my <a   href="http://localhost:8075/sample.vm" class="link">current doc </a>.</label>


我见过我的朋友。

以及选中复选框时需要显示的div

<div id="siri">This is to be shown and checkbox is checked</div>

这将显示并选中复选框

对于上面的输入复选框，我定义了jquery，如下所示

<script type="text/javascript">

$(document).ready(function(){
       $('#checkbox').click(function(){

         $("#siri").toggle();

    });
});


$（文档）.ready（函数（）{
$（“#复选框”）。单击（函数（）{
$（“#siri”）.toggle（）；
});
});

当我尝试使用上述jquery时，我无法选中该复选框。此外，Jquery不起作用。我是Jquery新手，欢迎提出任何建议。

使用：

$('#checkbox').change(function(){
    $("#siri").toggle();
});

Html代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div class="s30">
    <input type="hidden" value="false" name="_abcd">
    <input type="checkbox" value="true" name="abcd" id="abcd">
    <label for="abcd">I have seen my <a   href="http://localhost:8075/sample.vm" class="link">current doc </a>.</label>
    <div id="siri">This is to be shown and checkbox is checked</div>
    <script type="text/javascript">

    $(document).ready(function(){
      $("#siri").hide();
      $("#abcd").change (function(){
          if(this.checked){

              $("#siri").show();
          } else {
              $("#siri").hide();
          }
    });
  });
    </script>
</body>
</html>


我见过我的朋友。
这将显示并选中复选框
$（文档）.ready（函数（）{
$（“#siri”）.hide（）；
$（“#abcd”）。更改（函数（）{
如果（选中此项）{
$（“#siri”）.show（）；
}否则{
$（“#siri”）.hide（）；
}
});
});