bootstrap accordion和jquery嵌套复选框功能

时间:2015-10-22 12:36:24

标签: jquery

我有一个带有嵌套在其中的复选框的bootstrap手风琴。问题在于文档就绪,我想查看是否已检查panel1(.tb1)中的复选框以及panel2(.tb3)中的复选框。我有代码使用:复选框选择器检查它,但那个也不起作用。 :复选框选择器可以随时触发。

有关如何工作的任何建议。代码如下:

$(":checkbox").click(function() {
  if ($("#panel1 .tb1").is(":checked") && $("#panel2 .tb3").is(":checked")) {
    alert("both clicked");
  } else {

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="panel1" class="panel-collapse collapse in">
                <div class="panel-body">
                    <input type="checkbox" class="tb1" />&nbsp;&nbsp;Yes<br><input type="checkbox"class="tb4" />&nbsp;&nbsp;No<br><br></div><br>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="panel2" class="panel-collapse collapse">
                <div class="panel-body">
                    <input type="checkbox" class="tb3" />&nbsp;&nbsp;Yes<br><input type="checkbox"class="tb4" />&nbsp;&nbsp;No<br><br></div><br>
                </div>
            </div>
        </div>
       

</body>
</html>

1 个答案:

答案 0 :(得分:0)

Panel1复选框有一个tb3类,而不是你在jquery代码中指定的tb1。