Question

我一直在使用Jquery尝试对bootstraps 4的输入组做一些很酷的事情。这个想法是，当用户选中复选框时，包含该元素的输入组将变为绿色。

我以为我可以使用'.filter'来帮助我保持代码的干净，但是我不确定我是否正确。请参阅下面的代码段。

$('.form-checkbox').filter(function () {
  return ($(this).is(':checked'))
}).toggleClass("sub-green");

这是我当前的尝试JsFiddle。我将为此提供的任何帮助将不胜感激。

Answer 1

您的逻辑中有几个问题。首先，当复选框的checked属性更改时，您需要更改类。为此，请在change事件处理程序中执行代码。

第二，您不需要filter()。相反，您需要使用this影响引发事件的元素。然后，您可以向checked提供toggleClass()属性，以根据需要添加或删除类。

最后，您需要将类放在父input-group-text元素上，而不是复选框本身。为此，请使用closest()。试试这个：

$('.form-checkbox').change(function() {
  $(this).closest('.input-group-text').toggleClass("sub-green", this.checked);
});

// Trigger collapse on enter key down
$("#newsletter-email").keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    $(this).closest("div").find("#subscribe-collapse").trigger('click');
    return false;
  }
});

$(".btn-nl-collapse").click(function() {
  $(this).toggleClass("sub-black");
});

// Checkbox Styling

$('.form-checkbox').change(function() {
  $(this).closest('.input-group-text').toggleClass("sub-green", this.checked);
});

* {
  border-radius: 0 !important;
}

.bg-primary {
  background-color: #ededed !important;
}

.sec-spacer-xl {
  padding: 8rem;
}


/* == Additional Styles == */


/* ======================= */

.body-link-external::after {
  content: "\f08e";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-left: 3px;
}

.disclaimer {
  font-size: .7rem;
}


/* == form styles == */


/* ================= */

.form-hidden {
  display: none;
}

label {
  margin: 0;
}

.form-element {
  min-width: 280px;
  border: none;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: ease all .2s;
}

.form-element:focus {
  min-width: 280px;
  border: none;
  background-color: #fefdf3;
  transition: ease all .2s;
  border: 1px solid #ccc;
  box-shadow: none;
  outline: 0 none;
}

.btn-nl-collapse {
  border: 1px solid #ccc;
  background-color: #fff;
  transition: ease all .3s;
}

.btn-nl-collapse:hover,
.btn-nl-collapse.sub-black {
  border: 1px solid #222;
  background-color: #222;
  color: #fff;
  transition: ease all .2s;
}

.btn-nl-collapse:focus {
  border: 1px solid #ccc;
  box-shadow: none;
  outline: 0 none;
}

.form-element::-webkit-input-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:-moz-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element::-moz-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:-ms-input-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:focus::-webkit-input-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus:-moz-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus::-moz-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus:-ms-input-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.check-input:disabled {
  background-color: #fff;
}

.input-group-text.sub-green {
  background-color: rgba(156, 195, 32, 0.2);
  border: 1px solid @9cc320;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
  <div class="<?php echo esc_attr( $container ); ?>">
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <form>
          <label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
          <div class="input-group input-group-lg">
            <input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
            <div class="input-group-append">
              <button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
            </div>
          </div>
          <div class="collapse" id="gdpr-info-pane">
            <div class="card card-body">
              <h5>Almost there, we just need to confirm a few extra details...</h5>
              <p>We use Mailchimp as our marketing platform and make use of thier tools to securely maintain and handle our subscribers data. Your data will never be shared with third parties and we will never send you spam. </p>
              <p>
                <strong>How you would like to hear from us?</strong>
              </p>
              <label class="checkbox subfield" for="gdpr_8861">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
                    </div>
                  </div>
                  <input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
                </div>
              </label>
              <label class="checkbox subfield" for="gdpr_8865">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
                    </div>
                  </div>
                  <input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
                </div>
              </label>
              <label class="checkbox subfield" for="gdpr_8869">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <div class="input-group-text">

                      <input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
                    </div>
                  </div>
                  <input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
                </div>
              </label>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Answer 2

首先，您需要执行：

$('.form-checkbox').filter(function () {
  return ($(this).is(':checked'))
}).toggleClass("sub-green");

更改其中一个checkbox时。

您可以使用on('change')事件，例如：

$(".form-checkbox").on('change',function() {
  // example
  if ($(this).is(':checked')) {
    // this OR target 
    $(this).addClass("sub-green");
  } else {
    // this OR target
    $(this).removeClass('sub-green');
  }
  // or
  $('.form-checkbox').filter(function () {
     return ($(this).is(':checked'))
  }).toggleClass("sub-green");
})

是否可以将jQuery filter（）与特定的复选框状态一起使用？

2 个答案: