テキストボックスのvalue値をチェックボックスでチェックされたvalue値に変える

以下のソースでチェックされたチェックボックスのvalue値をテキストボックスに入れています。
赤と青をチェックするとテキストボックスに「Red Blue 」と入ります。
しかし、チェックしないvalue値はテキストボックスに入りません。

<html>
<head>
<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>
</head>
<body>
<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 type="checkbox" class="color" name="color" onClick="check(this.form)" value="Yellow">黄
<input value="" type="text" name="keyword">
</form>
</body>
</html>

そこで最初からテキストボックスにvalue値を入れておき、チェックされたものだけvalue値を変えることができないかと思っています。
例えば以下のようにチェックされていない場合のvalue値をテキストボックスに予め入れておき、チェックされるとそのvalue値と変わるというような感じです。
赤と青をチェックするとテキストボックスは「Red noBlack Blue noYellow」というような感じです。

<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 type="checkbox" class="color" name="color" onClick="check(this.form)" value="Yellow">黄
<input value="noRed noBlack noBlue noYellow" type="text" name="keyword">
</form>

このようなことは可能でしたらば、その方法を教えていただけませんでしょうか。
よろしくお願いします。

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

回答2件

こんにちは。

javascript の f.keyword.value の値を更新するところを、
以下のように修正するといかがでしょうか？

修正前：

javascript
1    if(f[i].className=="color" && f[i].checked==true){
2        f.keyword.value += f[i].value;
3    }

修正後：

javascript
1    if(f[i].className=="color") {
2        f.keyword.value += ((f[i].checked ? '':'no') + f[i].value);
3    }

参考になりましたら幸いです。

投稿2018/03/10 14:15

編集2018/03/10 14:27

jun68ykt

総合スコア9058

cp_cop

2018/03/12 01:44 編集

的確なご回答をいただきありがとうございます。また、お礼が遅くなりまして申し訳ございません。該当箇所を修正することで希望通りの動きをしてくれました。ありがとうございました。お二方とも的確なアドバイスでとても参考になったのですが、BAは最初にご回答いただけた方にさせていただきます。申し訳ありません。

jun68ykt

2018/03/12 02:03

解決されたようですね、よかったです！

cp_cop

2018/03/16 03:31

無事解決できました。ありがとうございました。

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

ベストアンサー

各チェックボックスのチェック状態を見てnoをつけるかつけないかを
判断すればいいです。
下の例では色と色の間にスペースを入れるために
いったん配列に各色をセットしています。

javascript
1function check(f){
2    var a = [];
3    for (var i=0; i<f.length;i++){
4        if(f[i].className=="color"){
5            a.push((f[i].checked ? '' : 'no') + f[i].value);
6        }
7    }
8    f.keyword.value=a.join(' ');
9}
10