テキストボックスのvalueに入る値を動的に変える

Question

以下のソースでチェックされたチェックボックスのvalue値をテキストボックスに入れています。
赤と青をチェックするとテキストボックスに「RedBlue」と入ります。

<script language="javascript">
function check(f){
f.keyword.value="";
for (var i=0; i<f.length;i++){
if(f[i].className=="color" && f[i].checked==true){
f.keyword.value += f[i].value;
}
}
f.keyword.readOnly=(f.keyword.value!="");
}
</script>

<form method="post" action="sample.php" name="inputform">
<input type="checkbox" class="color" name="color" onClick="check(this.form)" value="Red">赤
<input type="checkbox" class="color" name="color" onClick="check(this.form)" value="Black">黒
<input type="checkbox" class="color" name="color" onClick="check(this.form)" value="Blue">青
<input class="iro" value="" type="text" name="keyword">
</form>
```ここでテキストボックスに入力されるvalue値を動的に書き換えたいのですが可能でしょうか？
具体的には、
赤のvalueをRedから「レッド」
黒のvalueをBlackから「ブラック」
青のvalueをBlueから「ブルー」

例えば赤と青をチェックするとテキストボックスには「レッドブルー」と入力されるようにしたいと思っています。

配列を使って書き換えるのかと思い試行錯誤してみたのですがうまくいきません。

＝＝＝以下、追加＝＝＝
以下のソースを追加してみましたが置換されませんでした。
<script>
    jQuery(function() {
        jQuery('input.iro').each(function(){
            var txt = jQuery(this).val();
            jQuery(this).val(
                txt.replace('Red','レッド').replace('Black','ブラック').replace('Blue','ブルー')
            );
        });
    });
</script>

どなたかご教授いただければ助かります。

Comments

[defghi1977]

https://teratail.com/questions/116933　の続きですか？

[cp_cop]

ソースが同じため分かりにくくて申し訳ありません。続きではなく全く別の質問です。よろしくお願いいたします。

[defghi1977]

ではどのように試行錯誤したかをもう少し詳しく書いて下さい.

[cp_cop]

質問に補足を追加しました。よろしくお願いいたします。

Answer 1

テキストボックスに入った文字列を変換するのではなく、変換した文字を入れるというのは、質問の意図と反しますでしょうか？

let colors = { "Red":"レッド", "Blue":"ブルー", "Black":"ブラック"};

という連想配列を用意しておいてcheck関数内で以下のように colors[this.value] とすることでチェックしたチェックボックスの値(value)をキーにして変換したものを取得できます。

function check() {
  let iroText = document.querySelector("input[type='text'].iro");
  if (this.checked) {
    iroText.value = iroText.value + colors[this.value];
  }
}

jqueryは使ってませんが動くサンプルのリンクを載せておきます。

https://jsfiddle.net/euledge/11vqec13/40/

Comments

[cp_cop]

ご回答いただきありがとうございます。
またご丁寧にサンプルリンクまで載せていただきましてありがとうございます。

＞テキストボックスに入った文字列を変換するのではなく、変換した文字を入れるというのは、質問の意図と反しますでしょうか？

サンプルを確認しましたが、やりたいことそのものでとても助かりました。
１点、ご質問させていただきたいのですが、サンプルですとチェックをすると変換したvalueが入りますが、チェックを外しても消えない状態となっています。
さらにチェックをすると同じvalueが再度入る形になっていますが、これをチェックを外した場合にはテキストボックスからもvalueを削除するように変えることは可能でしょうか？

よろしければご回答いただければ幸いです。

[euledge]

提示した、check関数はチェックをつけても、外しても呼ばれます。
this.checkedはチェックをつけたときの処理なので、チェックを外した時は else の中に処理を書くことになります。
チェックつけた時と同様に連想配列によって該当する文字(レッド、ブルー、ブラック)がわかるのでその文字をテキストボックスのvalueから消せばよいのではないでしょうか？
消すには、普通に文字列置換で '空文字' に置換してあげれば実現できると思います。
質問の中にあったreplaceを使えばよいでしょう。

[euledge]

質問と直接関係ないのですが、他にされている質問でも同様の実装例があり気になったのでおせっかいながらコメントします。

元の質問の中で check関数があり

for (var i=0; i<f.length;i++){
if (f[i].className=="color" && f[i].checked==true){
f.keyword.value += f[i].value;
}
}

とループを回してクリックしたチェックボックスを見つけようとしていますが、
inputの onClick(this.form) を onClick(this) としてあげれば、 check関数の引数にはクリックしたチェックボックス自身が入るので、ループは不要になります。

<input type="checkbox" class="color" name="color" onClick="check(this)" value="Red">赤

function check(checkbox){
var iroText = document.querySelector("input[type='text'].iro");
iroText.value = ""
if (checkbox.checked == true) {
iroText.value += checkbox.value;
}
iroText.readOnly=(iroText.value != "");
}

[cp_cop]

お礼が遅くなってしまい申し訳ありませんでした。
また、とても参考になるコメントをいただきありがとうございます。

＞inputの onClick(this.form) を onClick(this) としてあげれば、 check関数の引数にはクリックしたチェックボックス自身が入るので、ループは不要になります。

わかりやすくソースまでお書きいただき勉強になりました。
ループをさせなくても onClick(this) とすることでcheck関数の引数にクリックしたチェックボックス自身が入るとは全く知りませんでした。
また１つ勉強になりました。
本当にありがとうございました。