phpのシステムにて背景色をjavascriptにて、さらにfor文で処理をしたい

JavaScriptで文字列中の変数展開を行う場合、シングルクォート「'」ではなく、バッククォート「`」で文字列を囲う必要があります。

javascript

1$(`[name="ckbk${i}"]`)2$(`.daycolor${i}`)

ただ今回のケースの場合、ループでも処理は書けますが、inputタグから数値は取得できますから、下記のように出来るかと思います。

javascript

1$(function() {2 // name=chbkで始まる要素のクリックイベントを登録3 $('[name^="ckbk"]').on('change', function() {4 // value要素から値を取得5 const num = $(this).val()6 7 // チェックしているかどうかを取得8 const isChecked = $(this).prop('checked')9 10 // チェック状態によってCSSを書き換える11 $(`.daycolor${num}`).css('background-color', isChecked ? 'lightsteelblue' : 'transparent')12 })13})


CSSで書くことも出来ます。
tr内にnameがcheckで始まる要素がチェックされている時、そのtrの中のclassがdaycolorで始まる要素を変更したい場合は下記になります

css

1tr:has([name^="ckbk"]:checked) [class^="daycolor"] {2 background-color: lightsteelblue;3}

ただし、hasセレクタはFirefoxに対応していません。
(2023-12-19リリース予定のFirefox 121で対応予定)

デモ:
https://jsfiddle.net/6frysL23/46/

コメントを投稿

0 コメント