Bus errorとSegmentation faultに困ったら見るブログ

物理の研究者による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)

【javascript】checkboxがチェックされたことをトリガーにしてテキストフォームに追記or削除したい

やりたいこと

・formのcheckboxがチェックされたら、それをトリガーにしてtext型のフォームに文字を入れる
・formのcheckboxがチェックが外されたら、それをトリガーにしてtext型のフォームから文字を消す



■ 過去記事 : 【Javascript】URLのクエリ情報からhtmlのフォームを埋める/チェックボックスをチェックする

↑これに似てるが、チェックボックスが外れた時にも対応しないといけないのでこの方法ではダメ



javascriptでoncheckedというcheckboxがチェックされたことを受け取るイベントハンドラがあるけど、
これだと、チェックが外れた時に対応できない
なので、onchangeというイベントハンドラを使う

■ 参考 : onchange - 変更があった時に発火する
syncer.jp



・htmlコードにcheckboxを用意する
・checkboxにidを設定する
・checkboxに onchange="isChecked1(n)" のように追記しておく
・これで、このcheckboxが変更された時にisCheckedというjavascriptの関数が走る、nは引数

javascriptで、そのisChecked()の中身を書く

function isChecked1(n) {
if (document.getElementById(n).checked) {
 parent.document.getElementById("list_reference").value = parent.document.getElementById("list_reference").value + n + ' ';
} else{
 parent.document.getElementById("list_reference").value = parent.document.getElementById("list_reference").value.replace(n + ' ', '');
 }
}

これで、checkboxがチェックされた時に元のhtmlの中のlist_referenceというテキストフォームにnと空白を追記する
チェックが外れたら、nと空白を消す

ランキング参加中です

↓クリックしていただけると嬉しいです〜