Question

所以，我已经坚持了几个小时。我基本上试图让一个复选框作为切换按钮。我希望jquery应用的样式仅在检查时应用，如果已取消选择则返回初始样式。

HTML标记：

<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
  <div class="input boolean optional mailing_list_form_opt_in">
    <input name="mailing_list_form[opt_in]" type="hidden" value="0">
    <label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
    <input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
     Yes, I would like to join the mailing list.
    </label>
 </div>

SCSS：

#new_mailing_list_form {
.opt {
  color: $white;
  background-color: $selectiveYellow !important;
  border: 2px solid $selectiveYellow !important;
}
.checkbox {
  margin: 0px;
  padding: 0px;
}
div label input {
  margin-right:100px;
}

.mailing_list_form_opt_in label {
  cursor: pointer;
  background: transparent;
  border: 2px solid $selectiveYellow;
  border-radius:2px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.4;
  overflow:auto;
  margin:4px;
  padding: 8px 15px;
  width: auto;

  &:hover {
    background-color: $sunglow;
    border: 2px solid $sunglow;
    color: $white;
  }
}

.mailing_list_form_opt_in label {
  display:block;
}

.mailing_list_form_opt_in label input {
  display: none;
}

.mailing_list_form_opt_in input:checked {
  background-color:$selectiveYellow;
  color:$white;
 }
}

JQuery的：

$('#mailing_list_form_opt_in').change(function () {
  $(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});

我也尝试过使用条件语句，但我开始进入意大利面条JQuery，它甚至都不起作用。

到目前为止工作：Working CodePen link

Answer 1

您可以使用jQuery的toggleClass()方法在用户点击元素时更改背景。

$("#checkbox_elem").on( "click", function(){
  $(this).toggleClass( 'background-class' );
});

现在您要做的就是在元素上使用默认样式，并将新的CSS规则放入background-class类定义中。单击该元素将切换元素上的类。

如果要添加更多功能，可以对元素使用显式检查：

$("#checkbox_elem").on( "click", function(){
  if ( $(this).is(':checked') ){
    // the checkbox is marked as "checked"
    // here you can manipulate the style accordingly
  }else{
    // the checkbox is NOT marked as "checked"
    // here you can manipulate the style accordingly
  }
});

Answer 2

所以，我正在分享我的纯HTML5 / CSS3解决方案（它不使用任何JS / JQuery！）来解决这个问题，这样对于那些坚持类似的人来说它可能会有所帮助。

我重构了我的标记如下，

HTML：

<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>

对于样式，我使用了相邻的选择器+＆amp;伪类:checked以显示该状态的行为。相应的样式如下，

SCSS：

input[type=checkbox] + label {
  background: transparent;
  border: 2px solid $selectiveYellow;
  border-radius: 2px;
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.4;
  overflow: auto;
  margin: 4px;
  padding: 8px 15px;
  @include transition( 0.25s linear);
  width: auto;

  &:hover {
    background-color: $sunglow;
    border: 2px solid $sunglow;
    color: $white;
  }
}

input[type=checkbox]:checked + label {
  background: $selectiveYellow !important;
  border: 2px solid $selectiveYellow !important;
  color: $white;
}

input[type=checkbox] {
  display: none;
}

完美无缺，添加了Codepen，以便您也可以查看它！希望这有助于他人！：d

选中复选框上的切换样式

2 个答案: