質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

791閲覧

以下を実行するにはどうしたらよいでしょうか?

unee

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/04 09:03

編集2019/07/05 01:51

こんにちは、質問させていただきます。

これまでの流れと質問

①phpで吐き出されるhtmlを変更しなければいけないため、jQueryで「/* .confirm__agree書き換え*/」を記述し、html要素の書き換えを行いました。

②チェックボックスをappearance:none;に設定し、
擬似クラス:checked、:focusでチェックボックスを作りました。
参考にしているのは下記のサイトです。
チェックボックス

そうすると、inputを実行できないため、「/* label.checkboxが押されたら checkboxをtureにする */」を記述しました。ここまでは正常に動きました。

③チェックボックスがチェックされていない状態で「イベントに申し込む」を押すと、下記のhtmlが出現する仕様でした。

html

1<p style="color: rgb(207, 30, 27); display: none;">同意項目にチェックを入れてください。<br>同意されない場合は、送信できません。<br><br></p>

②でinputを実行できたと思っているため、どこを見直せばいいのかわかりません。
JSを勉強始めたばかりですので、めちゃくちゃな記述をしていましたら、ご教示いただけますと嬉しいです。

コード

html側

1 <article class="confirm"> 2<form action="/entry/apply.php" method="post" name="entry_form"> 3 <input type="hidden" name="event_id" value="xxxx"> 4 5 6 <div class="confirm__title">参加お申込みのご確認</div> 7 <div class="confirm__text"> 8 9 </div> 10 <div class="confirm__textarea"> 11 <textarea name="regist_memo" cols="30" rows="4" maxlength="255" title="最大255文字"></textarea> 12 </div> 13 <div class="confirm__agree"> 14 <label><input type="checkbox" name="form_agree" value="agree"> <a href="/mobile/xxxxxx-xxxxxx/" target="_blank" style="color: blue; text-decoration: underline;">規約</a>に同意します</label> 15 <br><br> 16 <p style="color: rgb(207, 30, 27); display: none;">同意項目にチェックを入れてください。<br>同意されない場合は、送信できません。<br><br></p> 17 </div> 18 <div class="confirm__join"> 19 <a href="#">イベントに申し込む</a> 20 </div> 21 <div class="confirm__back"> 22 <a href="javascript:window.history.back();">戻る</a> 23 </div> 24</form> 25<script type="text/javascript" src="/common/js/common.js"></script> 26<script> 27 28$(function(){ 29 var textarea = $('textarea[maxlength]'); 30 textarea.bind( 31 "keydown keyup click", 32 function(){ 33 var max = $(this).attr('maxlength'); 34 if($(this).val().length > max){ 35 $(this).val($(this).val().substr(0, max)); 36 } 37 } 38 ); 39 40 $('.confirm__agree a').css('color', 'blue'); 41 $('.confirm__agree a').css('text-decoration', 'underline'); 42 $('.confirm__agree p').css('color', '#cf1e1b'); 43 $('.confirm__agree p').css('display', 'none'); 44 $('.confirm__answer p').css('color', '#cf1e1b'); 45 $('.confirm__answer p').css('display', 'none'); 46 47 $('.confirm__join a').click(function(){ 48 49 50 if (!$('input[name="form_agree"]').prop('checked')) { 51 $('.confirm__agree p').css('display', 'block'); 52 return false; 53 } 54 55 56 $('form[name="entry_form"]').submit(); 57 }); 58}); 59 60</script> 61 </article>

jQuery

1/* .confirm__agree書き換え*/ 2$(function(){ 3$('.confirm__agree').html('<label class="checkbox"><input type="checkbox" name="form_agree" value="agree"></label><label class="checkbox_text"><a href="/mobile/xxxxxx-xxxxxx/" target="_blank" style="color: blue; text-decoration: underline;">規約</a>に同意します</label>'); 4 }); 5 6/* label.checkboxが押されたら checkboxをtureにする */ 7 $('label.checkbox').on('clicke', function(){ 8 $(input).prop('form_agree','agree') 9 });

追記

jQuery

1/* label.checkboxが押されたら checkboxをtureにする */ 2 $('label.checkbox').on('click', function(){ 3 $(input).prop('form_agree','agree') 4 });

誤字の修正しました、が、動きません、、、

追記2

jQuery

1/* label.checkboxが押されたら checkboxをtureにする */ 2 $('label.checkbox').on('click', function(){ 3 $('input').prop('form_agree','agree') 4 });

inputを''で囲っていなかったので修正しました。
いただいた解決策を試しております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

click のスペルミスがあります。
-> clicke

javascript

1 $('label.checkbox').on('clicke', function(){ 2 $(input).prop('form_agree','agree') 3 });

2019-07-04 19:18 追記
修正後も動かないのは、$.html() で追加した要素に対して、イベントのセットが効いていないものと思います。
下記のように、要素を追加した後でイベントをセットしたら動くようにならないでしょうか?
( $(input).prop('form_agree', 'agree') の部分でエラーが出るとは思います。)

javascript

1/* .confirm__agree書き換え*/ 2$(function () { 3 $('.confirm__agree').html('<label class="checkbox"><input type="checkbox" name="form_agree" value="agree"></label><label class="checkbox_text"><a href="/mobile/xxxxxx-xxxxxx/" target="_blank" style="color: blue; text-decoration: underline;">規約</a>に同意します</label>'); 4 5 /* label.checkboxが押されたら checkboxをtureにする */ 6 $('label.checkbox').on('click', function () { 7 $(input).prop('form_agree', 'agree') 8 }); 9 //↑ ブロックの内側に入れて、順番に処理が走るようにする 10});

投稿2019/07/04 09:08

編集2019/07/04 10:19
mar-kn

総合スコア306

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unee

2019/07/04 09:20

ありがとうございます!全く気づかなかったです。。。修正しました! しかし動かないのでもうちょっと調査いたします。
unee

2019/07/05 08:53

ありがとうございました! イベントセットでまとめて記述で動くようになりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問