HTMLでチェックボックスを作り、コピーボタンを押すと「Value値」と「予め設定した文言」と合わせてクリップボードにコピーされるようにしたいのですが、資料を見ながら色々と試しても上手くできません。
お力を貸していただけないでしょうか。
質問1:好きな色の種類
□赤色
□青色
□黄色
□緑色
[コピーボタン]
↓
・好きな色の種類:赤色、青色
------------------------------
質問2:好きな動物
□いぬ
□ねこ
□うさぎ
□ライオン
[コピーボタン]
↓
・好きな動物:いぬ、うさぎ
上記のように、回答にチェックを入れてコピーボタンを押すことで
予め設定した文言と一緒にクリップボードへコピーされるようにしたいです。
※1ページに複数の質問を載せる予定
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんな感じで
<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>質問1:好きな色の種類</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>質問2:好きな動物</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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- Excel(エクセル) <Excel>結合したセルを含む計算式をコピーしたい 2 2022/04/04 11:55
- Visual Basic(VBA) VBA 参照先で選んだファイルをコピーし、出力先に別名で保存したい 8 2022/05/13 20:37
- Excel(エクセル) マクロVBA別Excelブックにデータ転記 2 2022/07/10 23:35
- Access(アクセス) アクセス 意図せずサブプロシージャを移動してしまうのを止めたい 1 2022/09/02 09:19
- UNIX・Linux redmineにメールを飛ばす方法 1 2022/09/13 22:02
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/06/23 15:02
- Excel(エクセル) シートが違う2枚のエクセルシートにある数値を別シートにコピーしたい(VBA?) 8 2022/03/31 12:24
- Visual Basic(VBA) Excel(VBA) 特定の条件に該当する行の値、書式を同じセルにコピ&ペーストしたいです 1 2022/05/21 18:18
- Visual Basic(VBA) 複数ファイルのデータの統合について 12 2022/05/14 12:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML ul li で横並びにナビゲー...
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
<ul><li></li></ul>にするメリ...
-
アコーディオンメニューがかく...
-
<ul>~</ul>が二つ続くと間に改...
-
真横に展開するドロップダウン...
-
CSSが上手く反映されないみたい...
-
HTMLのdlとul どちらが正しいと...
-
html <ul></ul>の並びで一行空...
-
<li>で並べたメニューのリンク...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
リセットCSSについて
-
文法チェックの<A>と</A>の間が...
-
レスポンシブWebデザインでリン...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
プルダウンメニューの背景色を...
-
excel vba で ulタグのなかのse...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報