label名をtextareaにまとめて表示させたい

Question

フォーム内のradioボタンがチェックされた時に対象のlabel名をtextareaに、
まとめて表示させる方法がなかなか思いつかず苦戦しております。

どなたかそのような方法ご存知の方いましたらよろしくお願いいたします。

<input type="radio" name="k_1" value="1018917"><label for="k_1">キッチンあり</label>
<input type="radio" name="k_1" value="0" checked><label for="k_1">キッチンなし</label>

<input type="radio" name="b_1" value="830959"><label for="b_1">浴室あり</label>
<input type="radio" name="b_1" value="0" checked><label for="b_1">浴室なし</label>

<input type="radio" name="t_1" value="145424"><label for="t_1">トイレあり</label>
<input type="radio" name="t_1" value="0" checked><label for="t_1">トイレなし</label>

<textarea name="チェックされたすべてのlabel名表示" cols="50" rows="5"></textarea>

Comments

[m.ts10806]

レイアウト完成イメージを提示されたほうが良いかと思います。

Answer 1

labelがforでidを指定していないのでラジオボタンの指定になっていません

Comments

[yambejp]

やるならこう？

<script>
document.addEventListener('input',(e)=>{
if(e.target.closest('[type=radio]')){
document.querySelector('textarea').textContent=[...document.querySelectorAll('[type=radio]:checked')].map(x=>{
return x.closest('label').textContent;
}).join('\n');
}
});
</script>
<label><input type="radio" name="k_1" value="1018917">キッチンあり</label>
<label><input type="radio" name="k_1" value="0">キッチンなし</label>

<label><input type="radio" name="b_1" value="830959">浴室あり</label>
<label><input type="radio" name="b_1" value="0">浴室なし</label>

<label><input type="radio" name="t_1" value="145424">トイレあり</label>
<label><input type="radio" name="t_1" value="0">トイレなし</label>

<textarea name="チェックされたすべてのlabel名表示" cols="50" rows="5"></textarea>

[KojiR]

ありがとうございます。
無事理想に近い動きをしましたのでこれを元にカスタマイズさせていただきます。
本当にありがとうございました。

Answer 2

こんばんは。
わたしも考えてみたんですが、あまりきれいに書けませんでした...

const updateTextarea = function(){
    var str = "";
    const keys = ['k', 'b', 't'];
    keys.forEach(k => {
        str += document.getElementsByName(k + '_1')[0].checked ? 
        document.querySelectorAll('label[for="' + k + '_1"]')[0].textContent : 
        document.querySelectorAll('label[for="' + k + '_1"]')[1].textContent;
    });
    document.getElementsByTagName('textarea')[0].value = str;
}
Array.prototype.forEach.call(document.getElementsByTagName('input'),e => e.addEventListener('change', updateTextarea));
updateTextarea();

参考程度にしていただければ幸いです。

Comments

[KojiR]

ありがとうございます。
参考にさせていただきます。