チェックボックスのスタイルを切り替えるチェックボックス

debugcn 投稿 Dev

アメーン

だから、私はこれで数時間立ち往生しています。私は基本的に、チェックボックスをトグルボタンとして機能させようとしています。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に陥り始めました。

これまでの作業：CodePenリンクの作業

アメーン

そのため、この問題に対する純粋な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>

スタイルについては、隣接するセレクター+と疑似クラスを使用して、: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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]