Q&A
kei344さん
この度もありがとうございます。
やりたい事が実現できました。
本当にありがとうございます！
###前提・実現したいこと
いつもお世話になります。
以前、「入力フォームのradioボタンの残り項目数を表示したい」という題名でチェックされたradioボタンの項目数を表示するという質問をさせて頂きました。
今回は、「text」「select」「radio」「checkbox」の4つのinput要素が複合された項目数を表示して、該当する項目が入力されるたびに項目数を減らしたいのですが上手くできません。
お手数おかけしますが、どなたかご教授よろしくお願いします。
実現したいことは
・「text」「select」「radio」「checkbox」の合計項目数を出したい（すべてname属性で取得する）
・チェックボックス、ラジオボタンは各項目ひとつでもチェックを入れたら項目数を「1」減らす
になります
###発生している問題・エラーメッセージ
・text、selectの項目数が取得できない
・checkboxにチェックを入れても残り項目数がへらない
###該当のソースコード
html
1<!--ここに残り項目数を表示--> 2<div class="number">.number</div> 3<form action=""> 4 <table> 5 <tr> 6 <th>ラジオボタン1</th> 7 <td><input type="radio" name="radio1"> 8 <label>1-1</label> 9 <input type="radio" name="radio1"> 10 <label>1-2</label> 11 <input type="radio" name="radio1"> 12 <label>1-3</label></td> 13 </tr> 14 <tr> 15 <th>ラジオボタン2</th> 16 <td><input type="radio" name="radio2"> 17 <label>2-1</label> 18 <input type="radio" name="radio2"> 19 <label>2-2</label> 20 <input type="radio" name="radio2"> 21 <label>2-3</label></td> 22 </tr> 23 <tr> 24 <th>テキスト1</th> 25 <td><input name="text1" type="text" size="20" value="" /></td> 26 </tr> 27 28 <!--セレクト--> 29 <tr> 30 <th>セレクト1</th> 31 <td><select name="select1"> 32 <option selected="selected">-- 選択してください --</option> 33 <option value="北海道">北海道</option> 34 <option value="青森県">青森県</option> 35 <option value="岩手県">岩手県</option> 36 <option value="宮城県">宮城県</option> 37 <option value="秋田県">秋田県</option> 38 <option value="山形県">山形県</option> 39 <option value="福島県">福島県</option> 40 <option value="茨城県">茨城県</option> 41 <option value="栃木県">栃木県</option> 42 <option value="群馬県">群馬県</option> 43 <option value="埼玉県">埼玉県</option> 44 <option value="千葉県">千葉県</option> 45 <option value="東京都">東京都</option> 46 <option value="神奈川県">神奈川県</option> 47 <option value="新潟県">新潟県</option> 48 <option value="富山県">富山県</option> 49 <option value="石川県">石川県</option> 50 <option value="福井県">福井県</option> 51 <option value="山梨県">山梨県</option> 52 <option value="長野県">長野県</option> 53 <option value="岐阜県">岐阜県</option> 54 <option value="静岡県">静岡県</option> 55 <option value="愛知県">愛知県</option> 56 <option value="三重県">三重県</option> 57 <option value="滋賀県">滋賀県</option> 58 <option value="京都府">京都府</option> 59 <option value="大阪府">大阪府</option> 60 <option value="兵庫県">兵庫県</option> 61 <option value="奈良県">奈良県</option> 62 <option value="和歌山県">和歌山県</option> 63 <option value="鳥取県">鳥取県</option> 64 <option value="島根県">島根県</option> 65 <option value="岡山県">岡山県</option> 66 <option value="広島県">広島県</option> 67 <option value="山口県">山口県</option> 68 <option value="徳島県">徳島県</option> 69 <option value="香川県">香川県</option> 70 <option value="愛媛県">愛媛県</option> 71 <option value="高知県">高知県</option> 72 <option value="福岡県">福岡県</option> 73 <option value="佐賀県">佐賀県</option> 74 <option value="長崎県">長崎県</option> 75 <option value="熊本県">熊本県</option> 76 <option value="大分県">大分県</option> 77 <option value="宮崎県">宮崎県</option> 78 <option value="鹿児島県">鹿児島県</option> 79 <option value="沖縄県">沖縄県</option> 80 </select></td> 81 </tr> 82 83 <!--チェックボックス--> 84 <tr> 85 <th>チェックボックス1</th> 86 <td><input type="checkbox" name="cb1" value="1"> 87 1-1 88 <input type="checkbox" name="cb1" value="2"> 89 1-2 90 <input type="checkbox" name="cb1" value="3"> 91 1-3</td> 92 </tr> 93 </table> 94</form> 95
javascript
1<script type="text/javascript"> 2$( _=> { 3 //radioの数を取得 4 const $radios = $( 'input[name="radio1"], input[name="radio2"]' ); 5 const radio_names = $.unique( $radios.map( ( i, e ) => e.name ).get() ); 6 7 //textの数を取得 8 const $texts = $( 'input[name="text1"]' ); 9 const text_names = $.unique( $texts.map( ( i, e ) => e.name ).get() ); 10 11 //selectの数を取得 12 const $selects = $( 'input[name="select1"]' ); 13 const select_names = $.unique( $selects.map( ( i, e ) => e.name ).get() ); 14 15 //checkboxの数を取得 16 const $checkboxs = $( 'input[name="cb1"]' ); 17 const checkbox_names = $.unique( $checkboxs.map( ( i, e ) => e.name ).get() ); 18 19 //残り項目数を取得・表示 20 $radios.on( 'change', () => { 21 $( '.number' ).html( '残り：' + ( radio_names.length + checkbox_names.length - $radios.filter( ':checked' ).length + $checkboxs.filter( ':checked' ).length ) + ' / ' + ( radio_names.length + checkbox_names.length) ); 22 } ).change(); 23}); 24 25</script>
###補足情報(言語/FW/ツール等のバージョンなど)
Cloud9の環境で制作中です。
https://jquery-form-test-yujiokayama.c9users.io/
回答2件
0
前の質問がよくわからないのでなんとも言えませ円が
radioは同じnameの要素は1つとして管理しているということですか？
checkboxはよくテクニックとして同じnameを使う場合がありますが
name単位で項目を減らすと同じnameを使った複数要素をチェックする場合
ロジックがブレますが大丈夫ですか？
投稿2017/01/29 07:05
総合スコア114769
0
ベストアンサー
HTMLも少し変更。
JavaScript
1$( _=> { 2 $( 'form' ).each( ( i, element ) => { 3 const $_inputs = $( 'input, textarea, select', element ); 4 const $_input_textarea_select = $_inputs.not( '[type="radio"], [type="checkbox"]' ); 5 const radio_names = $.unique( $( '[type="radio"], [type="checkbox"]', element ).map( ( i, e ) => e.name ).get() ); 6 $_inputs.on( 'input change', _=> { 7 let len = $_input_textarea_select.length + radio_names.length; 8 let count = len; 9 $_input_textarea_select.each( ( i, ele ) => { 10 if ( $.trim( $( ele ).val() ) ) { count--; } 11 } ); 12 $.each( radio_names, ( i, v ) => { 13 if ( $_inputs.filter( '[name="' + v + '"]:checked' ).length ) { count--; } 14 } ); 15 $( '.number', element ).html( '残り：' + count + ' / ' + len ); 16 } ).change(); 17 } ); 18} );
HTML
1<form action=""> 2<div class="number">.number</div> 3 <table> 4 <tr> 5 <th>ラジオボタン1</th> 6 <td> 7 <label><input type="radio" name="radio1">1-1</label> 8 <label><input type="radio" name="radio1">1-2</label> 9 <label><input type="radio" name="radio1">1-3</label> 10 </td> 11 </tr> 12 <tr> 13 <th>ラジオボタン2</th> 14 <td> 15 <label><input type="radio" name="radio2">2-1</label> 16 <label><input type="radio" name="radio2">2-2</label> 17 <label><input type="radio" name="radio2">2-3</label> 18 </td> 19 </tr> 20 <tr> 21 <th>テキスト1</th> 22 <td><input name="text1" type="text" size="20" value="" /></td> 23 </tr> 24 25 <!--セレクト--> 26 <tr> 27 <th>セレクト1</th> 28 <td><select name="select1"> 29 <option value="" selected="selected">-- 選択してください --</option> 30 <option value="北海道">北海道</option> 31 <option value="青森県">青森県</option> 32 <option value="岩手県">岩手県</option> 33 <option value="宮城県">宮城県</option> 34 <option value="秋田県">秋田県</option> 35 <option value="山形県">山形県</option> 36 <option value="福島県">福島県</option> 37 <option value="茨城県">茨城県</option> 38 <option value="栃木県">栃木県</option> 39 <option value="群馬県">群馬県</option> 40 <option value="埼玉県">埼玉県</option> 41 <option value="千葉県">千葉県</option> 42 <option value="東京都">東京都</option> 43 <option value="神奈川県">神奈川県</option> 44 <option value="新潟県">新潟県</option> 45 <option value="富山県">富山県</option> 46 <option value="石川県">石川県</option> 47 <option value="福井県">福井県</option> 48 <option value="山梨県">山梨県</option> 49 <option value="長野県">長野県</option> 50 <option value="岐阜県">岐阜県</option> 51 <option value="静岡県">静岡県</option> 52 <option value="愛知県">愛知県</option> 53 <option value="三重県">三重県</option> 54 <option value="滋賀県">滋賀県</option> 55 <option value="京都府">京都府</option> 56 <option value="大阪府">大阪府</option> 57 <option value="兵庫県">兵庫県</option> 58 <option value="奈良県">奈良県</option> 59 <option value="和歌山県">和歌山県</option> 60 <option value="鳥取県">鳥取県</option> 61 <option value="島根県">島根県</option> 62 <option value="岡山県">岡山県</option> 63 <option value="広島県">広島県</option> 64 <option value="山口県">山口県</option> 65 <option value="徳島県">徳島県</option> 66 <option value="香川県">香川県</option> 67 <option value="愛媛県">愛媛県</option> 68 <option value="高知県">高知県</option> 69 <option value="福岡県">福岡県</option> 70 <option value="佐賀県">佐賀県</option> 71 <option value="長崎県">長崎県</option> 72 <option value="熊本県">熊本県</option> 73 <option value="大分県">大分県</option> 74 <option value="宮崎県">宮崎県</option> 75 <option value="鹿児島県">鹿児島県</option> 76 <option value="沖縄県">沖縄県</option> 77 </select></td> 78 </tr> 79 80 <!--チェックボックス--> 81 <tr> 82 <th>チェックボックス1</th> 83 <td> 84 <label><input type="checkbox" name="cb1" value="1">1-1</label> 85 <label><input type="checkbox" name="cb1" value="2">1-2</label> 86 <label><input type="checkbox" name="cb1" value="3">1-3</label> 87 </td> 88 </tr> 89 </table> 90</form> 91 92```**動くサンプル：**[https://jsfiddle.net/6j0cb1ow/1/](https://jsfiddle.net/6j0cb1ow/1/)
投稿2017/01/29 08:36
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/01/29 08:18
2017/01/30 00:27
2017/01/30 00:35
退会済みユーザー
2017/01/30 03:05