Bootstrap复选框无法触发change事件

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>

以下是在 document.ready 中的 JQuery 代码：

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

无法触发事件。

- Michael Mahony

---

控制台上有任何错误吗？你的代码对我来说可以用（没有Bootstrap）。 - Claudio Redi

你的jQuery代码是否在$(document).ready()函数中？ - KidBilly

控制台没有错误，是的，该代码位于$(document).ready内部，并与其他已经运行的代码一起。 - Michael Mahony

由于我认为没有人会相信我，所以我制作了一个屏幕录像来展示代码的运行情况。我添加了一个testMe函数，它与复选框的onClick事件相关联。它显示一个关于$("#chkPartner).is(":checked")的警报，正如你所看到的，它总是显示“未选中”http://screencast.com/t/GQniCzndke8 - Michael Mahony

如果我更改代码以检查$("#chkPartner").prop("checked") == "checked"，它会执行相同的操作。 - Michael Mahony

Answer 1

以防万一有人遇到这个非常奇怪的问题，我使用toggle()解决了它。我所做的就是简单地创建一个名为toggleRep()的函数，并从复选框的onclick中调用它。它只是按照我想要的方式切换了rep字段的可见性。不确定为什么“正常”的方法不起作用，但这种方法完美地解决了问题：

<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>

当点击时调用这个函数：

function toggleRep() {
              $(".acelity-partner").toggle();
              if ($(".acelity-partner").is(":visible")) {
                  // do nothing
              } else {
                  //clear fields of their values
                  $(".acelity-rep").val("");
              }
          }

- Michael Mahony

Answer 2

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

- Martin

---

当我添加if ($("#chkPartner").prop("checked") != "checked") { alert("checked"); }时，因为复选框未被选中，所以在页面加载时会弹出警告。 - Michael Mahony