フォーム外にあるチェックボックスの値をフォーム内に1つのテキストに表示させ、且つ全選択をした場合も同じく表示させたい。

Javascriptの勉強の一環として、
フォーム外にあるチェックボックスの値をフォーム内に1つのテキストに表示させ、
尚且、全選択をした場合も同じく表示できるようにしたいと思っています。

やりたい事

<input type="checkbox" name="allChecked" id="all">全選択
<input type="checkbox" class="fruits" onClick="check(this.form)" value="りんご" name="chk" />りんご
<input type="checkbox" class="fruits" onClick="check(this.form)" value="みかん" name="chk" />みかん
<input type="checkbox" class="fruits" onClick="check(this.form)" value="バナナ" name="chk" />バナナ

<form name="fruitsform">
<input value="" size="50" type="text" name="fruits_all">
</form>

このような形で、
フォーム外にあるClass名『fruits』の値をフォーム内にあるName名『fruits_all』のテキストに表示させ、
あわせて全選択をチェックした場合も、全ての値をテキストに表示させたいです。

試した事

<script>
$(function() {
    $('#all').on('click', function() {
      $("input[name='chk']").prop('checked', this.checked);
    });
});
function check(f){
	f.fruits_all.value="";
	for (var i=0; i<f.length;i++){
	if(f[i].className=="fruits" && f[i].checked==true){
	f.fruits_all.value += f[i].value+(',');
	}
	}
	f.fruits_all.readOnly=(f.fruits_all.value!="");
}
</script>

Javascriptで上のような記載を試してみたのですが、この方法だと

<form name="fruitsform">
<input type="checkbox" name="allChecked" id="all">全選択
<input type="checkbox" class="fruits" onClick="check(this.form)" value="りんご" name="chk" />りんご
<input type="checkbox" class="fruits" onClick="check(this.form)" value="みかん" name="chk" />みかん
<input type="checkbox" class="fruits" onClick="check(this.form)" value="バナナ" name="chk" />バナナ
<input value="" size="50" type="text" name="fruits_all">
</form>

このように全てのチェックボックスを同じフォーム内に記載すれば、
チェックした値がテキスト内に表示されるのですが、
全選択をした場合、表示上ではチェックされても、テキストに全ての値を表示させる事ができませんでした。
※表示される場合は、りんご,みかん,バナナ　といったように『,』が入るようにしたく、こう記述しています。

初歩的な事かもしれませんが、
正解が見えない為、お知恵を貸して頂ければ幸いです。

よろしくお願いします。

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

回答1件

ベストアンサー

「JavaScriptの勉強の一環」とのことでしたので、まずは基本的なアドバイスをします。

まず、「意図したとおり動かないな、おかしいな」と思ったらconsole.log()で、現在のコードがどのように動いているか確かめてみましょう。
例えば以下の位置に書いて、check関数の引数であるfが自分が意図した値が来ているか確認してみてください。
（console.logの出力を確認するにはこちらなどを参考にしてください）

JavaScript
1function check(f){
2    console.log(f);
3    //以下省略
4}

こちらで確認したところ、出力はnullでその下にエラーが出るようです。
HTMLではonClick="check(this.form)"と記載してあるのですが、このthis.formで意図したものが引数として来ていないのではないでしょうか？

function check(f)の中身をみたところ、f.fruits_all.valueやf[i].className=="fruits"と書いてあるので、おそらく引数fにはすべてのinput要素が入る想定だったと思いますが、現状そのようには動いていません。
また「全てのチェックボックスを同じフォーム内に記載」した場合も、同様にconsole.logで確認するとその前のコードとの違いがわかると思います。

console.logをどんどん書いていくと、現状のcheck関数では想定通りの動きにならないことがわかると思うので、そこからは試行錯誤していく必要があると思います。

回答編

「正解が見えない」とのことですので、一つの回答のコードもかいてみました。
https://codepen.io/mattari-panda/pen/VwKBXWX

こちらはあくまでjQueryを使って書いた一つの答えですが、今回の要件ですといくつも書き方がありますので、ぜひご自身で色々試してみてください。（リンク先右下のForkというボタンを押すと、自分で編集する事ができる画面が開きます）

いくつか上記の回答のコードのポイントを書いておきます。

・HTMLのonClickは使わないほうが良い
・「配列」を勉強してみてください
・いきなり一つの関数にまとめずに、最初はコードが長くなっても良いです

■HTMLのonClickは使わないほうが良い
今回のように引数を使ったりすると、thisがわかりづらくなったりしますし、JavaScriptの中でコードを完結させたほうが、後々調べやすかったりします。

■「配列」を勉強してみてください
今回のように、複数ある要素を扱う場合は配列を使うと便利です。
文字として下記だ出す場合も、かんたんに変換することが出来ます。

■最初はコードが長くなっても良い
まず目指すべきは想定通りに動くコードです。
コードが長くなっても良いですし、不格好と思える記述になっても気にしないほうが良いです。

コードが書けるようになっても、いきなり正解の書き方にたどり着けることはありません。
少しづつ勉強して、いろんな書き方を学ぶうちに一つの正解と言えるかたちになっていきますので
最初は「なぜ動かないか」を調べてみて、とりあえず動くように作っていくと良いと思います。

長くなりましたが、JavaScriptの勉強頑張ってみてください。
（気が向いたらjQueryを使わない書き方も書いてみます）

投稿2021/01/09 06:36

mattari_panda

総合スコア429

Hiyoko_mochi

2021/01/09 07:38

お世話になります。ご回答やご教授ありがとうございます。 console.logの使用を癖づけておらず、確認してみた所、動きが明確にわかるようになりました。色々、書いてみて記載した部分までたどり着いたのですが、まだまだ学ぶ事が多くて、大変ですが頑張ってみます。また、正解の記述もありがとうございました。『今回の要件ですといくつも書き方があります』と仰って頂けたようにこれだけが正解と決めつけず、参考にし自分なりの正解を見つけれるよう頑張りたいと思います。最後にご助言、そして『最初はコードが長くなっても良い』のお言葉ありがとうございます。以前、教室で教えてくれていた人に長いと指摘された事があり、なるべく短く書けるようにを・・と意識してしまっていた部分もあったので、少し気が楽になりました。まだまだですが、精進していきたいと思います。ご回答頂き、ありがとうございました！

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