Question

我的网站上有一份新闻订阅CF7表格，我已经与Mailchimp for Wordpress集成。最初，只有在您单击复选框时才会检查它。由于我希望它有自定义样式复选框勾选图标，我添加了jQuery以在勾选时为其添加一个类。 jQuery看起来像这样：

＆＃13;

jQuery(".mc4wp-checkbox label").mousedown(function() {
  if (jQuery(this).hasClass("checked")) {
    jQuery(this).removeClass("checked")
  } else {
    jQuery(this).addClass("checked")
  }
});

＆＃13;

.checked { color: #C00; }
.mc4wp-checkbox label input {
position: absolute;
margin-left: 6px !important;
right: 0;
width: auto;
opacity: 0;
}
.mc4wp-checkbox label:before {
content: '' !important;
border: 2px solid #bbb !Important;
border-radius: 5px !Important;
cursor: pointer !Important;
display: inline-block !important;
float: right !Important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important;
}
.mc4wp-checkbox input:checked+label:before,
.mc4wp-checkbox label.checked:before {
background: #000;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 50% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> 
  <span class="newsletter">
    <input type="hidden" name="_mc4wp_subscribe_contact-form-7" value="0" />
    <span class="mc4wp-checkbox mc4wp-checkbox-contact-form-7">
      <label>
        <input type="checkbox" name="_mc4wp_subscribe_contact-form-7" value="1" checked="checked" />
        <span>Sign up for our newsletter</span>
      </label>
    </span>
  </span>
</p>

＆＃13;

但是现在我已经将复选框更改为始终被选中，如果用户不想订阅，则用户可以取消选中该复选框。但是现在上面的jquery不再以同样的方式工作了，因为它只是在有人点击复选框时才添加类。如何让类始终存在，并且当单击复选框时，它会删除该类？

请记住，因为我使用插件，我没有可以编辑的HTML，我只提供了一个短代码，这就是我使用jquery的原因

Answer 1

所以目前，当选中复选框时，背景才会变黑，而且由于jQuery，背景才会变黑。我希望它在默认情况下具有黑色背景，因为默认情况下也会选中该复选框，并且只有当我点击它时才应该为空。

在这种情况下，您只需在页面加载时触发mousedown事件，以便在元素上更新类状态。您可以使用trigger()执行此操作。另请注意，您可以使用toggleClass()使您的逻辑更简洁：

＆＃13;

jQuery(function($) {
  $(".mc4wp-checkbox label").mousedown(function() {
    $(this).toggleClass("checked");
  }).trigger('mousedown');
});

＆＃13;

.mc4wp-checkbox label input {
  position: absolute;
  margin-left: 6px !important;
  right: 0;
  width: auto;
  opacity: 0;
}

.mc4wp-checkbox label:before {
  content: '' !important;
  border: 2px solid #bbb !Important;
  border-radius: 5px !Important;
  cursor: pointer !Important;
  display: inline-block !important;
  float: right !Important;
  height: 49px !important;
  position: relative !Important;
  top: 0 !important;
  margin-left: 20px !important;
  margin-top: -15px !Important;
  width: 48px !important;
}

.mc4wp-checkbox input:checked+label:before,
.mc4wp-checkbox label.checked:before {
  background: #000;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 50% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <span class="newsletter">
    <input type="hidden" name="_mc4wp_subscribe_contact-form-7" value="0" />
    <span class="mc4wp-checkbox mc4wp-checkbox-contact-form-7">
      <label>
        <input type="checkbox" name="_mc4wp_subscribe_contact-form-7" value="1" checked="checked" />
        <span>Sign up for our newsletter</span>
      </label>
    </span>
  </span>
</p>

＆＃13;

据说，在处理复选框时，您应该在父mousedown上使用label事件。您应该在复选框本身上监听change事件，如下所示：

＆＃13;

jQuery(function($) {
  $(".mc4wp-checkbox :checkbox").on('change', function() {
    $(this).closest('label').toggleClass("checked", this.checked);
  }).trigger('change');
});

＆＃13;

.mc4wp-checkbox label input {
  position: absolute;
  margin-left: 6px !important;
  right: 0;
  width: auto;
  opacity: 0;
}

.mc4wp-checkbox label:before {
  content: '' !important;
  border: 2px solid #bbb !Important;
  border-radius: 5px !Important;
  cursor: pointer !Important;
  display: inline-block !important;
  float: right !Important;
  height: 49px !important;
  position: relative !Important;
  top: 0 !important;
  margin-left: 20px !important;
  margin-top: -15px !Important;
  width: 48px !important;
}

.mc4wp-checkbox input:checked+label:before,
.mc4wp-checkbox label.checked:before {
  background: #000;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 50% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <span class="newsletter">
    <input type="hidden" name="_mc4wp_subscribe_contact-form-7" value="0" />
    <span class="mc4wp-checkbox mc4wp-checkbox-contact-form-7">
      <label>
        <input type="checkbox" name="_mc4wp_subscribe_contact-form-7" value="1" checked="checked" />
        <span>Sign up for our newsletter</span>
      </label>
    </span>
  </span>
</p>

＆＃13;

复选框始终检查自定义样式

1 个答案: