チェックボックスで選択されている特定の文字列を赤太字にしたい

kintone カスタマイズ
1

お世話になっております。

チェックボックスで複数選択した月のうち、特定の月だけ赤太字にしたいと思っております。

画像で言えば、○で囲んだ1月の部分ですが

ここが赤太字にできずに悩んでおります。

他の1月の部分は想定通り赤太字にできました。

現在のコードを下に貼ります。

(function() {
"use strict";

//レコード一覧イベントを取得
kintone.events.on('app.record.index.show', function(event) {
//文字色の設定値
var fontColorRed = "#ff0000";

var elKessan2 = kintone.app.getFieldElements('数値_0'); //決算2ヶ月前
var elSinkoku = kintone.app.getFieldElements('数値_1'); //申告月
var elKansa = kintone.app.getFieldElements('チェックボックス_0'); //監査月
var elNyuryoku = kintone.app.getFieldElements('チェックボックス'); //入力月
var elCheck = kintone.app.getFieldElements('チェックボックス_1'); //チェック月

//決算2ヶ月前・申告月・監査月・入力月・チェック月により、文字色と太さを変更する。
for (var i = 0; i < elKansa.length; i++) {
var record = event.records[i]; //レコード情報を取得

//1月
if (document.URL.match("5526433")){
if (record['数値_0'].value == "1") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "1") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "1") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "1月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "1") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//2月
if (document.URL.match("5526435")){
if (record['数値_0'].value == "2") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "2") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "2") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "2月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "2") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//3月
if (document.URL.match("5526438")){
if (record['数値_0'].value == "3") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "3") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "3") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "3月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "3") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//4月
if (document.URL.match("5526440")){
if (record['数値_0'].value == "4") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "4") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "4") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "4月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "4") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//5月
if (document.URL.match("5526442")){
if (record['数値_0'].value == "5") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "5") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "5") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "5月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "5") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//6月
if (document.URL.match("5526444")){
if (record['数値_0'].value == "6") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "6") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "6") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "6月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "6") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//7月
if (document.URL.match("5526446")){
if (record['数値_0'].value == "7") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "7") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "7") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "7月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "7") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//8月
if (document.URL.match("5526448")){
if (record['数値_0'].value == "8") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "8") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "8") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "8月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "8") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//9月
if (document.URL.match("5526450")){
if (record['数値_0'].value == "9") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "9") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "9") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "9月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "9") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//10月
if (document.URL.match("5526452")){
if (record['数値_0'].value == "10") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "10") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "10") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "10月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "10") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//11月
if (document.URL.match("5526454")){
if (record['数値_0'].value == "11") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "11") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "11") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "11月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "11") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}

//12月
if (document.URL.match("5526456")){
if (record['数値_0'].value == "12") {
elKessan2[i].style.color = fontColorRed;
elKessan2[i].style.fontWeight = "bold";}
if (record['数値_1'].value == "12") {
elSinkoku[i].style.color = fontColorRed;
elSinkoku[i].style.fontWeight = "bold";}
if (record['チェックボックス'].value == "12") {
elNyuryoku[i].style.color = fontColorRed;
elNyuryoku[i].style.fontWeight = "bold";}
if (record['チェックボックス_0'].value == "12月") {
elKansa[i].style.color = fontColorRed;
elKansa[i].style.fontWeight = "bold";}
if (record['チェックボックス_1'].value == "12") {
elCheck[i].style.color = fontColorRed;
elCheck[i].style.fontWeight = "bold";}}
}
});
})();

 

複数選択したチェックボックスのうちの一部分だけ、赤太字にできるのでしょうか…

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

 

2

K.Mimura様

お世話になっております。
cstapの江田と申します。

チェックボックスの値は配列となるので特定の値を保持しているかどうかはindexOf()などを用いて確認できます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

ただし、elKansa[i].styleごと変更すると、上の例の監査月の値が1月と5月になっているセルについてはその両方ともが赤太字となってしまいます。
1月のみを赤太字にしたい場合は、DOMの中身を直接見る必要があるかと思います。
結局DOM操作を行うのであれば、今回の案件に関してはテーブル内にキーワード検索をかけてそれを赤太字にするという方法で実装してみてはいかがでしょうか？

(function(){"use strict";kintone.events.on('app.record.index.show',function(event){varmonths=[{key:5526433,value:'1月'},{key:5526435,value:'2月'},{key:5526438,value:'3月'},{key:5526440,value:'4月'},{key:5526442,value:'5月'},{key:5526444,value:'6月'},{key:5526446,value:'7月'},{key:5526448,value:'8月'},{key:5526450,value:'9月'},{key:5526452,value:'10月'},{key:5526454,value:'11月'},{key:5526456,value:'12月'},];varsearch;if(months.some(function(month){if(document.URL.match(month.key)){search=month.value;returntrue;}returnfalse;})){document.getElementById('view-list-data-gaia').innerHTML=document.getElementById('view-list-data-gaia').innerHTML.replace(newRegExp(search,'g'),'\<span style="color:#ff0000;font-weight:bold;"\>'+search+'\</span\>');}});})();
3

江田さま

 

コメントありがとうございます！

無事チェックボックス内の該当月だけ赤太字になりました。

 

しかし1月のときに11月の一部、2月のときに12月の一部だけ赤太字になってしまいました。

1月のときに11月を除外、2月のときに12月を除外できますでしょうか？

4

K.Mimura様

お世話になっております。

たしかに上記のコードではそうなってしまいますね。

少し雑ですが、コードの一部を変更して対応できるかと思います。

...
document.getElementById('view-list-data-gaia').innerHTML=document.getElementById('view-list-data-gaia').innerHTML.replace(newRegExp(search,'g'),'\<span style="color:#ff0000;font-weight:bold;"\>'+search+'\</span\>');  
...

↓

...
document.getElementById('view-list-data-gaia').innerHTML=document.getElementById('view-list-data-gaia').innerHTML.replace(newRegExp('\>'+search,'g'),'\>\<span style="color:#ff0000;font-weight:bold;"\>'+search+'\</span\>');  
...
5

江田さま

ありがとうございます！想定通りの結果にすることができました。

お手数をおかけいたしました。