チェックボックスでチェックされてる色を変えたい。

Question

チェックボックスでチェックされてる色を変えたい。

解決済

回答 2

投稿 2016/05/30 10:29

評価
クリップ 1
VIEW 7,011

TOEICengineer

score 37

初期表示時にデータベースから値を読み見込みチェックボックスにチェックをいれたものを、色をつけたいのですが、うまくいきません。
どうしたらいいでしょうか？

$(function () {
       var chkboxes = $("input[type=checkbox]");
            $.each(chkboxes, function (i,elem) {
                console.log($(this));

                if($(this).is(":checked")){
                    $(this).css("background", "#f3f365");
                }
        });
});

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 2 件

評価が高い順
新着順
古い順

+1

解決してるけど。ｗ。(特定ブラウザでうごかないかもしれないが）
サンプル

<div class="checkbox01">
  <label>
    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
    <span class="checkbox01-parts">チェックボックス01</span>
  </label>
  <label>
    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
    <span class="checkbox01-parts">チェックボックス02</span>
  </label>
  <label>
    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
    <span class="checkbox01-parts">チェックボックス03</span>
  </label>
</div>

/* css checkbox01 */
.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts::before{
  background-color: blue;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

投稿 2019/02/19 13:50

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

score 1 · Accepted Answer · 2016-05-30T11:12

ベストアンサー

0

<input type="checkbox"> には background が効かないと思います。なのでlabel要素で囲んでそれに背景を付けます。

<label><input type="checkbox"></label>
<label><input type="checkbox" checked></label>

$( function () {
    var chkboxes = $( 'input[type=checkbox]' );
    chkboxes.filter( ':checked' ).parent().css( 'background', '#f3f365' );
} );

動くサンプル：https://jsfiddle.net/5gwre397/

お書きになったコードはきちんと動いています（checkboxに background が正しく付与されます）が、簡略化できるので上記のように書きました。

投稿 2016/05/30 11:12

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2019/02/19 12:53

低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

チェックボックスでチェックされてる色を変えたい。

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

チェックボックスでチェックされてる色を変えたい。

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン