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

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

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

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

Q&A

解決済

1回答

2710閲覧

入力フォームのradioボタンの残り項目数を表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2017/01/22 13:40

編集2017/01/22 14:08

###前提・実現したいこと

いつもお世話になります。
フォーム画面の必須項目で、入力されてない必須項目数を表示しようとしています。
textとselectの残数は取得でき、表示できましたが
radioボタンの残数と表示がうまくできません。

JavaScript

###発生している問題・エラーメッセージ

入力必須項目数 5
となりますが、
入力必須項目数 2
としたいです。

あと、「KESSAI_ID」、「MAIL_FLG」のどちらかのラジオボタンにチェックを入れると
1つの項目数は減るのでが、そのあとのどちらかのラジオボタンをチェックしても
入力項目数が減りません。

###該当のソースコード

■HTML <tr> <th class="title">メールマガジン <p class="icon_hissu">必須</p> </th> <td><input type="radio" name="MAIL_FLG" /> <label>受け付ける</label> <input type="radio" name="MAIL_FLG" /> <label>受け付けない</label></td> </tr> <tr> <th class="title necessary short"> <input type="radio" name="KESSAI_ID"> <label>説明文</label></th> <td>説明文</td> </tr> <tr> <th class="title necessary short"><span class="HTMLFORM_ELEMENT"> <input type="radio" name="KESSAI_ID"> <label>説明文</label> </span></th> <td>説明文</td> </tr> <tr> <th class="title necessary short"><span class="HTMLFORM_ELEMENT"> <input type="radio" name="KESSAI_ID"> <label>説明文</label> </span></th> <td>説明文</td> </tr> ■JavaScript Code <script type="text/javascript"> $(function(){ var total = $("form").find("input[name=\"MAIL_FLG\"], input[name=\"KESSAI_ID\"]").length; $(".total").html(total); var i = 0; $(".number").html(total - i); var check = function() { i = 0; //radio $("form").find("input[name=\"MAIL_FLG\"], input[name=\"KESSAI_ID\"]").each(function() { if($(this).val() !== "") { i++; } }); $(".number").html(total - i); }; $("form").find("input[name=\"MAIL_FLG\"], input[name=\"KESSAI_ID\"]").change(function() { check(); }); }); --> </script>

長文になり申し訳ございませんが、
ご教授よろしくお願いします。

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

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

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

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

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

kei344

2017/01/22 13:41

「上記のコード」が抜けているようです。
退会済みユーザー

退会済みユーザー

2017/01/22 13:43

すみません、上記はありませんでした。。
kei344

2017/01/22 13:57

質問文は編集できますので、修正されてはいかがでしょうか。
退会済みユーザー

退会済みユーザー

2017/01/22 14:09

編集しました。ご指摘ありがとうございます。
退会済みユーザー

退会済みユーザー

2017/01/23 03:04

Kei344様、ご回答ありがとうございます。サンプルの添付も丁寧にありがとうございました。
guest

回答1

0

ベストアンサー

JavaScript

1$( _=> { 2 // console.log( $.unique( $( 'input[type="radio"]' ).map( ( i, e ) => e.name ).get() ).length ); // ラジオボタンの種類の数 3 const $radios = $( 'input[type="radio"]' ); 4 const radio_names = $.unique( $radios.map( ( i, e ) => e.name ).get() ); 5 $radios.on( 'change', () => { 6 $( '.number' ).html( '残り:' + ( radio_names.length - $radios.filter( ':checked' ).length ) + ' / ' + radio_names.length ); 7 } ).change(); 8} ); 9```**動くサンプル:**[https://jsfiddle.net/mntkxbhk/](https://jsfiddle.net/mntkxbhk/) 10 11--- 12 13【アロー関数 - JavaScript | MDN14[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions) 15 16【【jQuery】複数の要素・配列に対して処理をするmapの使い方 - TASK NOTES17[http://www.task-notes.com/entry/20141019/1413717129](http://www.task-notes.com/entry/20141019/1413717129) 18 19【jQuery.unique() | jQuery API Documentation】 20[http://api.jquery.com/jQuery.unique/](http://api.jquery.com/jQuery.unique/) 21 22.filter() | jQuery API Documentation】 23[http://api.jquery.com/filter/](http://api.jquery.com/filter/) 24 25:checked Selector | jQuery API Documentation】 26[http://api.jquery.com/checked-selector/](http://api.jquery.com/checked-selector/)

投稿2017/01/22 15:09

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2017/01/23 06:52

サンプルと参考文献まで頂きありがとうございました。 無事、解決できたので感謝しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問