回答受付が終了しました

ID非公開

2021/9/23 16:22

22回答

チェックボックスを押すとテキストエリアに設定した文章を反映させたいです。 ただ、左右のフレームに別れて動作するようにしたいです。

JavaScript | HTML、CSS42閲覧xmlns="http://www.w3.org/2000/svg">50

回答(2件)

0

Vue.jsで、作成しました。 checkbox.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <style> .checkbox { float: left; margin-right: 50%; } .list { float: left; } </style> </head> <body> <div id="app"> <div class="checkbox"> <lavel for="apple">りんご</lavel> <input id="apple" type="checkbox" v-model="fruits" value="りんご"><br> <lavel for="orange">みかん</lavel> <input id="orange" type="checkbox" v-model="fruits" value="みかん"><br> </div> <div class="list"> <ul> <li v-for="f in fruits">{{ f }}</li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="./checkbox.js"></script> </body> </html> checkbox.js var app=new Vue({ el: "#app", data:{ fruits: [] } });

0

ID非公開さん >・・・・チェックボックスを押すとテキストエリアに設定した文章を反映・・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap{ display:flex; padding:16px; } .box{ flex-basis:200px; border:#333 1px solid; padding:16px; } </style> </head> <body> <div class="wrap"> <form class="box" name="myform"> <input type="checkbox" name="mytxt" value="りんご" onchange="ptext()">りんご<br> <input type="checkbox" name="mytxt" value="みかん" onchange="ptext()">みかん<br> <input type="checkbox" name="mytxt" value="もも" onchange="ptext()">もも<br> </form> <div class="box" id="outtext"></div> </div> <script> function ptext() { let txt0 =""; const txt1 = document.myform.mytxt; console.log( txt1 ); for (let i = 0; i < txt1.length; i++) { if (txt1[i].checked) { txt0 += txt1[i].value + "<br>"; } } document.getElementById("outtext").innerHTML = txt0; } </script> </body> </html>