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

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

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

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

Q&A

解決済

1回答

5075閲覧

jQuery ID属性取得がうまくいかない

a-_.

総合スコア133

jQuery

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

0グッド

0クリップ

投稿2016/09/23 01:36

編集2016/09/23 01:50

下記コードの$('input[name = bbs]').on('click',function()から処理で、bbsをclickした時に変数myidでradioのidを取得、変数sendlistでr1~3をcheckした時の判別、if文でbbsがcheckedされたらtrueとなってsendlist[myid].textを含めたvalue値をsendに代入、chkid[]はsendlist[myid]のcheckflgがtrueか否かでdisabled
という様に解釈してるんですが、var myid = $(this).prop('id');の箇所で現段階だとid="r1"しか取得できていない状態で、複数のID属性の内「radioの、このID属性」と特定するコーディングを行いたいのですが、どの様なものなんでしょうか

<script type="text/javascript"> $(function() { $('form').on('submit',function() { if ($('#r1').prop('checked')) { with($('#name')) { if (val().length >= 10) { window.alert("ERROR1"); return false; } if (val() === "") { window.alert("ERROR2"); return false; } } with($('#comment')) { if (val().length >= 300) { window.alert("ERROR3"); return false; } if (val() === "") { window.alert("ERROR4"); return false; } } } if ($('#r2').prop('checked') || $('#r3').prop('checked')) { if ($('input[name = "chkid[]"]:checked').length == 0) { window.alert("ERROR5"); return false; } } return true; }); $('input[name = bbs]').on('click',function() { var myid = $(this).prop('id'); var sendlist = { "r1":{"text":"投稿",checkflg:true}, "r2":{"text":"更新",checkflg:false}, "r3":{"text":"削除",checkflg:false}, }; if ($('input[name = bbs]').prop('checked') == true) { $('#send').val(sendlist[myid].text); $('input[name = "chkid[]"]').prop('disabled',sendlist[myid].checkflg); } }); }); </script> </head> <body> <form method="post" action=""> <table> <tr> <td> 名前:<input type="text" name="name" id="name"> 内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> <input type="radio" name="bbs" id="r1" value="post">投稿 <input type="radio" name="bbs" id="r2" value="update">更新 <input type="radio" name="bbs" id="r3" value="delete">削除 <input type="submit" id="send"> </td> </tr> </table>

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

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

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

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

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

guest

回答1

0

ベストアンサー

なにがわからないかわかりませんが、何度か指摘しているとおり
以下のように替えてください

ラジオボタンの初期値をみてボタンのvalueやチェックボックスのdisableを替えているので
ロード時にr1~r3を走査する処理(※2)がはいっており
※1のconsole.logでどのオブジェクトが処理されているか確認できると思います

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function() { 4 $('form').on('submit',function() { 5 if ($('#r1').prop('checked')) { 6 with($('#name')) { 7 if (val().length >= 10) { 8 window.alert("ERROR1"); 9 return false; 10 } 11 if (val() === "") { 12 window.alert("ERROR2"); 13 return false; 14 } 15 } 16 with($('#comment')) { 17 if (val().length >= 300) { 18 window.alert("ERROR3"); 19 return false; 20 } 21 if (val() === "") { 22 window.alert("ERROR4"); 23 return false; 24 } 25 } 26 } 27 if ($('#r2').prop('checked') || $('#r3').prop('checked')) { 28 if ($('input[name = "chkid[]"]:checked').length == 0) { 29 window.alert("ERROR5"); 30 return false; 31 } 32 } 33 return true; 34 }); 35 $('input[name = bbs]').on('change',function() { //※4 change→on+change 36 var myid = $(this).prop('id'); 37 console.log(myid);//※1 38 var sendlist = { 39 "r1":{"text":"投稿",checkflg:true}, 40 "r2":{"text":"更新",checkflg:false}, 41 "r3":{"text":"削除",checkflg:false} //※3:最後のデータのケツのカンマを削除 42 }; 43 if ($(this).prop('checked') == true) { 44 $('#send').val(sendlist[myid].text); 45 $('input[name = "chkid[]"]').prop('disabled',sendlist[myid].checkflg); 46 } 47 }).change();//※2 ロード時に実行するための処理 48}); 49</script> 50</head> 51<body> 52<form method="post" action=""> 53<table> 54<tr> 55<td> 56名前:<input type="text" name="name" id="name"> 57内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> 58<input type="radio" name="bbs" id="r1" value="post" checked>投稿 59<input type="radio" name="bbs" id="r2" value="update">更新 60<input type="radio" name="bbs" id="r3" value="delete">削除 61<input type="submit" id="send"> 62</td> 63</tr> 64</table> 65<input type="checkbox" name="chkid[]" value="1">dummy1<br> 66<input type="checkbox" name="chkid[]" value="2">dummy2<br> 67<input type="checkbox" name="chkid[]" value="3">dummy3<br> 68</form>

※3:オブジェクトの書き方を工夫
※4:changeトリガーをon+changeに変更

投稿2016/09/23 02:06

編集2016/09/23 07:37
yambejp

総合スコア114572

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

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

a-_.

2016/09/23 05:00 編集

ご回答ありがとうございます 以前も同様のコメントいたしましたが、console.log(myid);だと「myidが定義されていない」と表示、.change();を追加しても改善なしです
yambejp

2016/09/23 05:05

scriptタグも含め一言一句修正せずにコピペしてもだめですか?
a-_.

2016/09/23 05:43

因みに確認したいんですが$('input[name = bbs]').change(function()は何故.on('change',function()ではないのでしょうか
yambejp

2016/09/23 05:57

1点だけ怪しい箇所みつけました 古いIEはオブジェクトの最後の要素の後ろにカンマがあるとエラーになるようです ※3のようにカンマを削除しました。
yambejp

2016/09/23 05:58

.change()はよく使われるイベントなので独立してメソッドが用意されています onのchangeでも実質どちらでもかわりません
a-_.

2016/09/23 06:22 編集

変わらないとご回答いただきましたが、試しに※1~3を追加した状態で.on('change',function()でも実行してみると動作に支障があることを確認しました どちらもchangeを指しているはずなのに動作が異なるのは何故でしょうか
yambejp

2016/09/23 06:15

ああ、なるほど changeのほうがスマートな方法ですが、IEの仕様にあわせるとonで 拡張したほうがいいのかもしれませんね。ちょっと勉強になりました ひきつづき問題があれば指示ください
a-_.

2016/09/23 07:23

すいません、話が噛みあっていない様にしか捉えられないんですが 今回の処理での「.change~」と「.on('change',function()~」の違いを変わらないはずなのに動作が異なることについてお答えいただけますか
yambejp

2016/09/23 07:29

いや、噛み合ってますよ。IEの仕様と書きましたよね? 私のIE11の環境ではどちらの書き方も変わらないですが、 質問者さんのIEがちょっとおかしいんだと思います。 その状況でもon('change',function(){・・・ なら動く可能性があるというだけです。 であればon+changeで書けばいいでしょう。
yambejp

2016/09/23 07:38

とりあえずソースも修正してあります
a-_.

2016/09/23 07:45

on+change=on('change')という意味なんでしょうか
yambejp

2016/09/23 07:49

>on+change=on('change')という意味なんでしょうか そう読み取れないなら、私の書き方が悪いのでしょうね ご指摘のとおりです onについてはいかが詳しいので参考にしてくだい http://www.jquerystudy.info/reference/events/on.html
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問