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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

Q&A

解決済

3回答

10298閲覧

リセットボタンを作成し、ラジオボタン→初期値に チェックボックス→全クリアができない

mogiruri

総合スコア37

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/08/12 00:03

編集2018/08/12 00:58

リセットを押したら

1 テキストボックスを空に
2 ラジオボタンを初期値へ
3 チェックボックスのチェックをオールクリア

という動作を行いたいのですがラジオとチェックのリセットが行えません。
attrも
試して見ましたが動作しませんでした、どこが間違っているのでしょうか?

よろしくお願いいたします。
jQueryバージョン : jquery-1.11.2

javascript

1 $("#resetBtn").click(function(){ 2 $(".clearBox").val(""); 3 $("#radCam1").prop("checked", true); 4 $('.lsCheck').prop("checked",false); 5 });

html

1<div data-role="content"> 2 <div data-role="main" class="ui-content"> 3 4//テキストボックス部分 リセットされる 5 <div data-role="fieldcontain"> 6 <label for="txtName">Name:</label> 7 <input type="text" name="txtName" id="txtName" class="clearBox"/> 8 </div> 9 <div data-role="fieldcontain"> 10 <label for="txtEmail">e-Mail:</label> 11 <input type="text" name="txtEmail" id="txtEmail" class="clearBox"/> 12 </div> 13 <div data-role="fieldcontain"> 14 <label for="txtConfMail">Confirm e-Mail:</label> 15 <input type="text" name="txtConfMail" id="txtConfMail" class="clearBox"/> 16 </div> 17// ラジオ リセットされない 18 <div data-role="fieldcontain"> 19 <fieldset data-role="controlgroup" data-type="horizontal"> 20 <legend>Camera Type</legend> 21 <input type="radio" name="radCam" id="radCam1" class="radCam" checked="checked"/> 22 <label for="radCam1">DSLR</label> 23 <input type="radio" name="radCam" id="radCam2" class="radCam"/> 24 <label for="radCam2">Point and Shoot</label> 25 <input type="radio" name="radCam" id="radCam3" class="radCam"/> 26 <label for="radCam3">No Camera</label> 27 </fieldset> 28 </div> 29//チェックボックス リセットされない 30 <div data-role="fieldcontain"> 31 <fieldset data-role="controlgroup" id=cbInterest> 32 <legend>Interested in:</legend> 33 <input type="checkbox" name="checkbox2" id="checkbox2_0" class="lsCheck"/> 34 <label for="checkbox2_0">Landscape</label> 35 <input type="checkbox" name="checkbox2" id="checkbox2_1" class="lsCheck"/> 36 <label for="checkbox2_1">Fashion</label> 37 <input type="checkbox" name="checkbox2" id="checkbox2_2" class="lsCheck"/> 38 <label for="checkbox2_2">Food</label> 39 <input type="checkbox" name="checkbox2" id="checkbox2_3" class="lsCheck"/> 40 <label for="checkbox2_3">Portraiture</label> 41 <input type="checkbox" name="checkbox2" id="checkbox2_4" class="lsCheck"/> 42 <label for="checkbox2_4">Sport</label> 43 <input type="checkbox" name="checkbox2" id="cbOther" class="lsCheck"/> 44 <label for="cbOther">Other</label> 45 </fieldset> 46 </div> 47 48 <div data-role="fieldcontain"> 49 <label for="txtOhter">Other Areas:</label> 50 <textarea cols="40" rows="8" name="txtOther" id="txtOther" class="clearBox"></textarea> 51 </div> 52 <p id="erMsgRego" class="erMsg"></p> 53 <button id="regoBtn" data-inline="true">Register</button> 54 <button id="resetBtn" data-inline="true">Start Again</button> 55 </div> 56 57 58<script src="jQuery/jquery-1.11.2.min.js"></script> 59<script src="jQuery/jquery.mobile-1.4.5.min.js"></script> 60<script type="text/javascript" src="js/script.js"></script>

#追記
<script src="jQuery/jquery.mobile-1.4.5.min.js"></script>
を外すと

javascript

1$("#radCam1").prop("checked", true); 2 $('.lsCheck').prop("checked",false);

も動作することがわかりました。
ですがJQMを使用しなければいけないので外すことはできません。

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

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

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

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

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

m.ts10806

2018/08/12 00:20

jQueryのバージョンも質問本文に追記してください。
mogiruri

2018/08/12 00:23

ありがとうございます、本文の方へバージョン情報を追記致しました。
guest

回答3

0

自己解決

解決致しました。

jQuery mobileではどうやら通常のJSやJQ操作では動作しないようです。
参考元
http://manualkun.com/troubleshoot/3/
https://blog.lysender.com/2013/05/checkingunchecking-checkbox-doesnt-work-in-jquery-mobile/

下記コードにて初期化可能

javascript

1 $("#resetBtn").click(function(){ 2 $(".clearBox").val(""); 3 $( "input[type='radio']" ).prop( "checked", false ).checkboxradio( "refresh" ); 4 $( "#radCam1" ).prop( "checked", true ).checkboxradio( "refresh" ); 5 $( "input[type='checkbox']" ).prop( "checked", false ).checkboxradio( "refresh" ); 6 $("#erMsgRego").html(""); 7 });

.checkboxradio( "refresh" ); というのが肝で、追加すると解消可能でした。

ラジオボタンにて、デフォでcheckedされている値に戻すためには、他のボタンが選択されている場合は一度全体をpropでfalseしてあげてから、デフォ要素にをtrueをかけ直してあげる必要があるようです。

$( "input[type='radio']" ).prop( "checked", false ).checkboxradio( "refresh" );

のみだと無選択になります。

かつ

$( "#radCam1" ).prop( "checked", true ).checkboxradio( "refresh" );

のみだとリセット前のcheckedと一緒に複数選択されてしまいます。

根本的な原因まだ掘り下げてはいませんが、
今回JQMの使用が必須であり、フレームワークにて左右されることを加味してしませんでした。
後ほど探って見ます。

意見を下さった方ありがとうございました。

投稿2018/08/12 02:01

編集2018/08/12 02:04
mogiruri

総合スコア37

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

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

0

質問者様のコードを元にjsFiddleで実際の動作を確認してみたのですが問題ありませんでした。

質問者様が掲載したコード以外の箇所でエラーが発生しているかもしれません。
Chromeのデベロッパーツールのconsole部分で何かエラーが表示されていないか確認してみてください。

投稿2018/08/12 00:09

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

mogiruri

2018/08/12 00:29

ご回答ありがとうございます。 エラーを確認したところ、ajax-loader.gif が取得できていないようです。当ファイルを入れた記憶はないのですがどうゆうことでしょうか?
guest

0

コードにも間違いは見当たりませんし、きちんと動作するようです。

私はこちらでリセットされますよ。いかがですか?
https://jsfiddle.net/71d2uc30/

なので環境をご提示頂くのが良いと思います。

投稿2018/08/12 00:08

unininaritai

総合スコア46

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

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

mogiruri

2018/08/12 00:18 編集

ご回答ありがとうございます。 一応HTMLの該当ページ分を全部掲載し直しました。 私の方でもjsfiddleで確認しましたが動作しました。。。 環境は mac os sierra, chrome, atom です ほかに提示するものはありますでしょうか?
unininaritai

2018/08/12 00:31

テキストがリセットされるのに他がだめ。というのが不思議ですね。 $(".clearBox").val(""); で処理が止まっているようなので、続きの処理を妨げる原因がconsoleに何か出ていると思います。 easy_no_easyさんが仰るようにご確認頂くのが良いでしょう。 macでchromeなら「Command + Option + J」です。 またはjsfiddleで動作確認できたのであれば、他のjsやHTMLの記述があやしいです。他の部分を消しながら、何があると動作しないのか確認していくと、「クラス名が重複してた」など何か見つかると思います。 定石を申し上げるばかりであまりお力になれずすみません。
mogiruri

2018/08/12 00:46

いえ、考えてくださりありがとうございます。 エラーチェックをしてみたのですが  ajax-loader.gif が取得できないというもののみです。ですがこれはおそらく直接このエラーには関係のないものと思います。 他のファンクションはこのファンクションを作るまでは動作していたので周辺に問題があるかもしれませんが、、、探して見ます。
unininaritai

2018/08/12 01:08 編集

するとJSのどこかに「ajax-loader.gif を取得した後で、『ある動作』をしてねという指示」が書かれているのだと思います。 それに対してエラーは「いやそもそも取得ができないよ」と言っているわけですね。 おそらくどこかのページで『ある動作』が必要なのだけど、今回のページでそれは不要なため、ajax-loader.gif がそもそもページに存在せず、よって「いやそもそも取得ができないよ」ということだと思います。 解決策は次の2つでしょうか。 1.消す方法 もしご自身が『ある動作』を望んでなければ、それを指示する部分をまるごと消していいでしょう。 けれど、なぜその指示が書かれているのか考えると、きっと何かお使いのプラグインで書かれていて、ご自身で気づいてないけど必要な操作だというケースがありえます。そこで2です。 2.条件下でのみ動作させる方法 「ajax-loader.gif を取得した後で、『ある動作』をしてねという指示」の部分をまるごと、「もし ajax-loader.gif が存在していた場合には」と囲ってあげるのが良いと思います。そうすれば今回のページで「いやそもそも取得ができないよ」というエラーはなくなるでしょう。まず先に ajax-loader.gif が存在するかどうかを判定させればいいわけですね。その存在判定ができるJqueryにlengthがあります。こちらをご参考にどうぞ→http://black-flag.net/jquery/20150324-5622.html
m.ts10806

2018/08/12 01:21

ajaxloaderのgifはjquery.mobileから呼ばれているものなのでjquery.mobileをそのまま利用されるのであれば適切に設置してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問