Question

所以，我有一个使用Bootstrap方法制作的复选框。我试图显示或隐藏一些div，具体取决于是否选中此复选框。我有以下HTML：

<div class="col-lg-12">
              <div class="checkbox" id="partner-div">
                  <label>
                      <input type="checkbox" id="chkPartner" />
                      Check here if you are an Acelity partner or representative submitting a video on behalf of someone else.
                  </label>
              </div>
            </div>
            <div class="form-group acelity-partner" style="display:none">
                <div class="col-lg-12">
                    <label for="txtRepFirstName">Representative's First Name</label>
                    <input type="text" class="form-control" id="txtRepFirstName" placeholder="Representative's First Name'" />
                </div>
            </div>
            <div class="form-group acelity-partner" style="display:none">
                <div class="col-lg-12">
                    <label for="txtRepLastName">Representative's Last Name</label>
                    <input type="text" class="form-control" id="txtRepLastName" placeholder="Representative's Last Name'" />
                </div>
            </div>
            <div class="form-group acelity-partner" style="display:none">
                <div class="col-lg-12">
                    <label for="txtRepEmail">Representative's Email Address</label>
                    <input type="text" class="form-control" id="txtRepEmail" placeholder="Representative's Email Address'" />
                </div>
            </div>

以下JQuery在document.ready中：

$("#chkPartner").change(function (event) {
                  if ($("#chkPartner").prop("checked")) {
                      $(".acelity-partner").show();
                  } else {
                      $(".acelity-partner").hide();
                  }
              });

无法触发事件。

Answer 1

万一有人碰到这个非常奇怪的问题，我用toggle（）解决了。我所做的只是创建一个名为toggleRep（）的函数，并从复选框的onclick中调用它。它只是按照我的意愿切换rep字段的可见性。不确定为什么“正常”方式不起作用，但这种方式完美无缺：

true

单击时调用此函数：

<div class="col-lg-12">
              <div class="checkbox" id="partner-div">
                  <label>
                      <input type="checkbox" id="chkPartner" onclick="toggleRep();" />
                      Check here if you are an Acelity partner or representative submitting a video on behalf of someone else.
                  </label>
              </div>
            </div>

Answer 2

尝试使用if ($("#chkPartner").prop("checked") == "checked")。它可能不会返回您在false时所期望的null。

Bootstrap复选框不会触发change事件

2 个答案: