在速度宏

时间:2015-05-08 22:52:43

标签: javascript jquery velocity

我想在速度宏中选中复选框时显示div部分。 这是速度宏

中定义的复选框的代码
<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();

    });
});

当我尝试使用上面的jquery时,我无法选中该复选框。 Jquery也没有工作。我是Jquery的新手,欢迎任何建议。

2 个答案:

答案 0 :(得分:0)

使用:

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

答案 1 :(得分:0)

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>