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

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

jQUery
1$(function () {
2       var chkboxes = $("input[type=checkbox]");
3            $.each(chkboxes, function (i,elem) {
4                console.log($(this));
5
6                if($(this).is(":checked")){
7                    $(this).css("background", "#f3f365");
8                }
9        });
10});

行動規範の内容に同意します

回答2件

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

html
1<div class="checkbox01">
2  <label>
3    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
4    <span class="checkbox01-parts">チェックボックス01</span>
5  </label>
6  <label>
7    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
8    <span class="checkbox01-parts">チェックボックス02</span>
9  </label>
10  <label>
11    <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
12    <span class="checkbox01-parts">チェックボックス03</span>
13  </label>
14</div>

css
1/* css checkbox01 */
2.checkbox01-input{
3  display: none;
4}
5.checkbox01-parts{
6  padding-left: 20px;
7  position:relative;
8  margin-right: 20px;
9}
10.checkbox01-parts::before{
11  content: "";
12  display: block;
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 15px;
17  height: 15px;
18  border: 1px solid #999;
19  border-radius: 4px;
20}
21.checkbox01-input:checked + .checkbox01-parts::before{
22  background-color: blue;
23}
24.checkbox01-input:checked + .checkbox01-parts{
25  color: #009a9a;
26}
27.checkbox01-input:checked + .checkbox01-parts::after{
28  content: "";
29  display: block;
30  position: absolute;
31  top: -5px;
32  left: 5px;
33  width: 7px;
34  height: 14px;
35  transform: rotate(40deg);
36  border-bottom: 3px solid #009a9a;
37  border-right: 3px solid #009a9a;
38}

投稿2019/02/19 04:50

退会済みユーザー

総合スコア0

ベストアンサー

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

HTML
1<label><input type="checkbox"></label>
2<label><input type="checkbox" checked></label>

JavaScript
1$( function () {
2    var chkboxes = $( 'input[type=checkbox]' );
3    chkboxes.filter( ':checked' ).parent().css( 'background', '#f3f365' );
4} );
5```**動くサンプル：**[https://jsfiddle.net/5gwre397/](https://jsfiddle.net/5gwre397/)
6
7
8お書きになったコードはきちんと動いています（checkboxに `background` が正しく付与されます）が、簡略化できるので上記のように書きました。