Javascript 更改复选框列表项的颜色

我有一个复选框+标签的列表。选中复选框后，我希望列表项的背景色发生更改。当前，选中复选框时，整个列表将更改背景色，而我只希望更改单个项目的背景色。谢谢你的帮助

代码：

names = ["Dave","Bob","Chuck"];
var numberOf = names.length; 
//Log the number of players and their names to the console.
console.log("You have " + numberOf + " recent players, and their names are " + names);
//Players List
var text = "<ul>";
for (i = 0; i < numberOf; i++) {
    text += "<li class='playerListItem'><label><input type='checkbox' class='playerCheckbox'>" + names[i] + "</label></li>";
    }
text += "</ul>";
document.getElementById("recentPlayersContainer").innerHTML = text;

//Changes background of currently selected playe
$('input.playerCheckbox').on('change', function(event) {
$('li.playerListItem').css('backgroundColor', 'rgba(255,102,51,0.15)');
});

});

names=[“戴夫”、“鲍勃”、“查克”]；
var numberoff=names.length；
//将玩家数量及其姓名记录到控制台。
log（“你有“+numberOf+”个最近的玩家，他们的名字是“+names”）；
//球员名单
var text=“
”；
对于（i=0；i”+名称[i]+“”；
}
text+=“
”；
document.getElementById（“RecentPlayerContainer”）.innerHTML=text；
//更改当前选定播放的背景
$（'input.playerCheckbox'）。在（'change'，函数（事件）上{
$（'li.playerListItem'）.css（'backgroundColor'，'rgba（255102,51,0.15）'）；
});
});

您可以这样做：

$('input.playerCheckbox').on('change', function(event) {
  $(this).closest("li").css('backgroundColor', 'rgba(255,102,51,0.15)');
});

---

还值得补充的是，取消选中复选框时，这不会删除背景色。因此，我只想使用一个类，您可以根据需要删除并应用它。

您可以这样做：

$('input.playerCheckbox').on('change', function(event) {
  $(this).closest("li").css('backgroundColor', 'rgba(255,102,51,0.15)');
});

$('input.playerCheckbox').on('change', function(event) {
    $(this).closest('li.playerListItem').css('backgroundColor', 'rgba(255,102,51,0.15)');
});

还值得补充的是，取消选中复选框时，这不会删除背景色。因此，我只想使用一个可以适当删除和应用的类。

jQuery不够

$('input.playerCheckbox').on('change', function(event) {
    $(this).closest('li.playerListItem').css('backgroundColor', 'rgba(255,102,51,0.15)');
});

$('#recentPlayersContainer').append(
    $('<ul />').append(
        $.map(["Dave","Bob","Chuck"], function(player) {
            var check = $('<input />', {
                'class' : 'playerCheckbox',
                type    : 'checkbox',
                on      : {
                    change : function() {
                        $(this).closest('li')
                        .css('backgroundColor', this.checked ? 'rgba(255,102,51,0.15)' : "");
                    }      
                }
            }),
                lbl = $('<label />', {text : player}),
                li  = $('<li />', {'class' : 'playerListItem'});

            return li.append( lbl.prepend( check ) );
        })
    )
);

$（'recentPlayersContainer'）。追加(
$（“
”）。追加(
$.map（[“Dave”、“Bob”、“Chuck”]，函数（播放器）{
变量检查=$（''{
“类”：“playerCheckbox”，
键入：“复选框”，
关于：{
更改：函数（）{
$（this）.最近（'li'））
.css（'backgroundColor'，this.checked？'rgba（255102,51,0.15）：）；
}      
}
}),
lbl=$（''，{text:player}），
li=$（“
”，{'class'：'playerListItem'}）；
返回li.append（lbl.prepend（check））；
})
)
);

jQuery不够

$('#recentPlayersContainer').append(
    $('<ul />').append(
        $.map(["Dave","Bob","Chuck"], function(player) {
            var check = $('<input />', {
                'class' : 'playerCheckbox',
                type    : 'checkbox',
                on      : {
                    change : function() {
                        $(this).closest('li')
                        .css('backgroundColor', this.checked ? 'rgba(255,102,51,0.15)' : "");
                    }      
                }
            }),
                lbl = $('<label />', {text : player}),
                li  = $('<li />', {'class' : 'playerListItem'});

            return li.append( lbl.prepend( check ) );
        })
    )
);

$（'recentPlayersContainer'）。追加(
$（“
”）。追加(
$.map（[“Dave”、“Bob”、“Chuck”]，函数（播放器）{
变量检查=$（''{
“类”：“playerCheckbox”，
键入：“复选框”，
关于：{
更改：函数（）{
$（this）.最近（'li'））
.css（'backgroundColor'，this.checked？'rgba（255102,51,0.15）：）；
}      
}
}),
lbl=$（''，{text:player}），
li=$（“
”，{'class'：'playerListItem'}）；
返回li.append（lbl.prepend（check））；
})
)
);

---

在事件侦听器上使用“this”关键字

$('input.playerCheckbox').on('change', function(event) {
  // 'this' below refers to the clicked element. the parents() function selects only its parent's <li>   

  $(this).parents('li').css('backgroundColor', 'rgba(255,102,51,0.15)'); 
});

$（'input.playerCheckbox'）。打开（'change'，函数（事件）{
//下面的“this”表示单击的元素。parents（）函数仅选择其父元素的

$（this）.parents（'li'）.css（'backgroundColor'，'rgba（255102,51,0.15））；
});

在事件侦听器上使用“this”关键字

$('input.playerCheckbox').on('change', function(event) {
  // 'this' below refers to the clicked element. the parents() function selects only its parent's <li>   

  $(this).parents('li').css('backgroundColor', 'rgba(255,102,51,0.15)'); 
});

$（'input.playerCheckbox'）。打开（'change'，函数（事件）{
//下面的“this”表示单击的元素。parents（）函数仅选择其父元素的

$（this）.parents（'li'）.css（'backgroundColor'，'rgba（255102,51,0.15））；
});

当只选中一个复选框时，背景色将被删除，但一旦选中多个复选框，则只有最底部的一个可以删除背景色。当只选中一个复选框时，但一旦选中多个复选框，则只有最底部的一个可以删除背景色