タグ埋め込みで実装されるフォームにjavasCriptでデザインを変更したい
一行の埋め込みタグをページ内に配置する事で表示される
問合せフォームのチェックボックスとその横のテキストラベルをまとめ
divで囲み線をつけたいです。
htmlはコードから吐き出されるのでいじれないため、javascript(jQuery)で
チェックボックスを全て取得し配列に入れて、そこからforEachで1つずつ
チェックボックス、テキストラベルをidで取得し、
jQueryのwrapAllで<div class='wrapperInner'></div>で囲みたいのですができません。
checkboxArray = Array.from(document.querySelectorAll("input[type='checkbox']")); checkboxArray.forEach(checkbox=>{ var checkboxId = checkbox.id; var labelId = checkbox.nextElementSibling.id; $(checkboxId,labelId).wrapAll("<div class='wrapperInner'></div>"); });
forEachのなかでconsole.log(checkboxId)、console.log(labelId)ではちゃんと要素のidは表示されているので
jQuery(checkboxId,labelId)の部分で様子が指定できていないのでしょうか?
どう修正すれば、期待通り結果になるのでしょうか?
よろしくお願いします
=========追記=========
HTMLがどうなってるかわからないとやりようがないとのことだったので、該当箇所のhtml追記します
<div class="satori__input_group"> <label> お問い合わせ種類(複数選択可) <span class="satori__require"> 必須 </span> </label> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_0" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="SEOでの集客を増やしたい"> <label for="satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd"> SEOでの集客を増やしたい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_1" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="サイト内のコンバージョン率を改善したい"> <label for="satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd"> サイト内のコンバージョン率を改善したい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_2" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="サイトのリニューアルを考えている"> <label for="satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd"> サイトのリニューアルを考えている </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_3" name="custom_field[d5c1201f3b679079b]" type="checkbox" value=" 新規サイトの立ち上げを考えている"> <label for="satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd"> 新規サイトの立ち上げを考えている </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_4" name="custom_field[d5c1201f3b679079b]" type="checkbox" value=" コンテンツ制作を依頼したい"> <label for="satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd"> コンテンツ制作を依頼したい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_5" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="オウンドメディアを立ち上げたい"> <label for="satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd"> オウンドメディアを立ち上げたい </label> <br> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_7" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="その他"> <label for="satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd"> その他 </label> <br> <div class="satori__error_messages"> <span> 入力内容に不備があります </span> <span> お問い合わせ種類(複数選択可)の入力は必須です </span> </div> </div>
回答2件
あなたの回答
tips
プレビュー