HTMLのチェックボックス+コピーについて

HTMLでチェックボックスを作り、コピーボタンを押すと「Value値」と「予め設定した文言」と合わせてクリップボードにコピーされるようにしたいのですが、資料を見ながら色々と試しても上手くできません。

お力を貸していただけないでしょうか。

質問１：好きな色の種類
□赤色
□青色
□黄色
□緑色
[コピーボタン]
↓
・好きな色の種類：赤色、青色

------------------------------

質問２：好きな動物
□いぬ
□ねこ
□うさぎ
□ライオン
[コピーボタン]
↓
・好きな動物：いぬ、うさぎ

上記のように、回答にチェックを入れてコピーボタンを押すことで
予め設定した文言と一緒にクリップボードへコピーされるようにしたいです。
※1ページに複数の質問を載せる予定

よろしくお願いいたします。

No.1 ベストアンサー 回答者： yambejp 回答日時： 2020/10/12 09:50

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[data-selector]').forEach(x=>{
const selector=x.dataset["selector"];
x.addEventListener('click',()=>{
const content=[...document.querySelectorAll(selector+":checked")].map(x=>x.value).join("、");
(async()=>Object.assign(document.createElement('textarea'),{
textContent:content,
style:'positon:absolute;top:-999px',
}))()
.then(res=>document.querySelector('body').appendChild(res))
.then(res=>void(res.select(),document.execCommand('copy'))||res)
.then(res=>document.querySelector('body').removeChild(res));
});
});
});

</script>
<textarea></textarea>
<form>
<fieldset>
<legend>質問１：好きな色の種類</legend>
<ul>
<li><label><input type="checkbox" name="color" class="color" value="赤色">赤色</label></li>
<li><label><input type="checkbox" name="color" class="color" value="青色">青色</label></li>
<li><label><input type="checkbox" name="color" class="color" value="黄色">黄色</label></li>
<li><label><input type="checkbox" name="color" class="color" value="緑色">緑色</label></li>
</ul>
<input type="button" class="copy" data-selector=".color" value="copy">
</fieldset>

<fieldset>
<legend>質問２：好きな動物</legend>
<ul>
<li><label><input type="checkbox" name="animal" class="animal" value="いぬ">いぬ</label></li>
<li><label><input type="checkbox" name="animal" class="animal" value="ねこ">ねこ</label></li>
<li><label><input type="checkbox" name="animal" class="animal" value="うさぎ">うさぎ</label></li>
<li><label><input type="checkbox" name="animal" class="animal" value="ライオン">ライオン</label></li>
</ul>
<input type="button" class="copy" data-selector=".animal" value="copy">
</fieldset>
</form>

この回答へのお礼

ありがとうございます！
理想通りです！とても助かりました＾＾

お礼日時：2020/10/12 20:16