「.css('background','')」の意味合いについての質問です。

前提

label要素もしくはチェックボックスがクリックされた際に、
チェックボックスに対になっているlabel要素の背景色を、
灰色に変更するコードについてです。
「label.css('background','');」の部分は、
一度label要素の背景色を初期化しているということでしょうか。

よろしくお願い致します。

該当のソースコード

jQuery
1$(function() {
2  const chkBox = $('label, input[type="checkbox"]');
3  const label  = $('label');
4
5  chkBox
6    .on('click', function() {
7      label
8        .css('background','');
9      $(':checked')
10        .each(function() {
11          $(`label[for='${$(this).attr("id")}']`)
12            .css('background', '#ccc');
13        });
14    });
15});

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6</head>
7<body>
8  スキル:
9  <input type="checkbox" name="html" value="HTML" id="html">
10  <label for="html">HTML</label>
11  <input type="checkbox" name="css" value="CSS" id="css">
12  <label for="css">CSS</label>
13  <input type="checkbox" name="javascript"
14  value="JavaScript" id="javascript">
15  <label for="javascript">JavaScript</label>
16  <input type="checkbox" name="php" value="PHP" id="php">
17  <label for="php">PHP</label>
18<script src="js/jquery-3.6.0.min.js"></script>
19<script src="js/app.js"></script>
20</body>
21</html>

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

回答1件

ベストアンサー

インラインstyleの backgroundプロパティを削除しています。
一度すべてのラベルの backgroundプロパティを削除してから、
ループでチェックのあるチェックボックスの背景色をグレーに設定してますね。

えらく遠回りな処理だなという印象です。
チェックボックスのchangeイベントを使えば、ループさせる必要はないですね。

JavaScript/JQuery
1$(function() {
2  $('input[type=checkbox]').on("change",function() {
3    $(`label[for='${$(this).attr("id")}']`)
4      .css('background',$(this).prop('checked')?'#ccc':'');
5  });
6});