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

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

ただいまの
回答率

90.49%

  • JavaScript

    16461questions

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

入力フォームのインプット要素「text」「select」「radio」「checkbox」が複合された項目数を表示したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 652
退会済みユーザー

退会済みユーザー

前提・実現したいこと

いつもお世話になります。
以前、「入力フォームのradioボタンの残り項目数を表示したい」という題名でチェックされたradioボタンの項目数を表示するという質問をさせて頂きました。

今回は、「text」「select」「radio」「checkbox」の4つのinput要素が複合された項目数を表示して、該当する項目が入力されるたびに項目数を減らしたいのですが上手くできません。

お手数おかけしますが、どなたかご教授よろしくお願いします。

実現したいことは
・「text」「select」「radio」「checkbox」の合計項目数を出したい(すべてname属性で取得する)
・チェックボックス、ラジオボタンは各項目ひとつでもチェックを入れたら項目数を「1」減らす

になります

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

・text、selectの項目数が取得できない
・checkboxにチェックを入れても残り項目数がへらない

該当のソースコード

<!--ここに残り項目数を表示-->
<div class="number">.number</div>
<form action="">
  <table>
    <tr>
      <th>ラジオボタン1</th>
      <td><input type="radio" name="radio1">
        <label>1-1</label>
        <input type="radio" name="radio1">
        <label>1-2</label>
        <input type="radio" name="radio1">
        <label>1-3</label></td>
    </tr>
    <tr>
      <th>ラジオボタン2</th>
      <td><input type="radio" name="radio2">
        <label>2-1</label>
        <input type="radio" name="radio2">
        <label>2-2</label>
        <input type="radio" name="radio2">
        <label>2-3</label></td>
    </tr>
    <tr>
      <th>テキスト1</th>
      <td><input name="text1" type="text" size="20" value="" /></td>
    </tr>

    <!--セレクト-->
    <tr>
      <th>セレクト1</th>
      <td><select name="select1">
          <option selected="selected">-- 選択してください --</option>
          <option value="北海道">北海道</option>
          <option value="青森県">青森県</option>
          <option value="岩手県">岩手県</option>
          <option value="宮城県">宮城県</option>
          <option value="秋田県">秋田県</option>
          <option value="山形県">山形県</option>
          <option value="福島県">福島県</option>
          <option value="茨城県">茨城県</option>
          <option value="栃木県">栃木県</option>
          <option value="群馬県">群馬県</option>
          <option value="埼玉県">埼玉県</option>
          <option value="千葉県">千葉県</option>
          <option value="東京都">東京都</option>
          <option value="神奈川県">神奈川県</option>
          <option value="新潟県">新潟県</option>
          <option value="富山県">富山県</option>
          <option value="石川県">石川県</option>
          <option value="福井県">福井県</option>
          <option value="山梨県">山梨県</option>
          <option value="長野県">長野県</option>
          <option value="岐阜県">岐阜県</option>
          <option value="静岡県">静岡県</option>
          <option value="愛知県">愛知県</option>
          <option value="三重県">三重県</option>
          <option value="滋賀県">滋賀県</option>
          <option value="京都府">京都府</option>
          <option value="大阪府">大阪府</option>
          <option value="兵庫県">兵庫県</option>
          <option value="奈良県">奈良県</option>
          <option value="和歌山県">和歌山県</option>
          <option value="鳥取県">鳥取県</option>
          <option value="島根県">島根県</option>
          <option value="岡山県">岡山県</option>
          <option value="広島県">広島県</option>
          <option value="山口県">山口県</option>
          <option value="徳島県">徳島県</option>
          <option value="香川県">香川県</option>
          <option value="愛媛県">愛媛県</option>
          <option value="高知県">高知県</option>
          <option value="福岡県">福岡県</option>
          <option value="佐賀県">佐賀県</option>
          <option value="長崎県">長崎県</option>
          <option value="熊本県">熊本県</option>
          <option value="大分県">大分県</option>
          <option value="宮崎県">宮崎県</option>
          <option value="鹿児島県">鹿児島県</option>
          <option value="沖縄県">沖縄県</option>
        </select></td>
    </tr>

    <!--チェックボックス-->
    <tr>
      <th>チェックボックス1</th>
      <td><input type="checkbox" name="cb1" value="1">
        1-1
        <input type="checkbox" name="cb1" value="2">
        1-2
        <input type="checkbox" name="cb1" value="3">
        1-3</td>
    </tr>
  </table>
</form>
<script type="text/javascript">
$( _=> {
  //radioの数を取得
    const $radios = $( 'input[name="radio1"], input[name="radio2"]' );
    const radio_names = $.unique( $radios.map( ( i, e ) => e.name ).get() );

    //textの数を取得
    const $texts = $( 'input[name="text1"]' );
    const text_names = $.unique( $texts.map( ( i, e ) => e.name ).get() );

    //selectの数を取得
    const $selects = $( 'input[name="select1"]' );
    const select_names = $.unique( $selects.map( ( i, e ) => e.name ).get() );

    //checkboxの数を取得
    const $checkboxs = $( 'input[name="cb1"]' );
    const checkbox_names = $.unique( $checkboxs.map( ( i, e ) => e.name ).get() );

  //残り項目数を取得・表示
    $radios.on( 'change', () => {
        $( '.number' ).html( '残り:' + ( radio_names.length + checkbox_names.length - $radios.filter( ':checked' ).length + $checkboxs.filter( ':checked' ).length ) + ' / ' + ( radio_names.length + checkbox_names.length) );
    } ).change();
});

</script>

補足情報(言語/FW/ツール等のバージョンなど)

Cloud9の環境で制作中です。
https://jquery-form-test-yujiokayama.c9users.io/

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

前の質問がよくわからないのでなんとも言えませ円が
radioは同じnameの要素は1つとして管理しているということですか?
checkboxはよくテクニックとして同じnameを使う場合がありますが
name単位で項目を減らすと同じnameを使った複数要素をチェックする場合
ロジックがブレますが大丈夫ですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/29 17:18

    yambejpさん
    レスありがとうございます。
    radioは同じnameの要素は1つとして管理したいです。
    前回の質問が
    https://teratail.com/questions/63028
    で質問させて頂き、radio要素のみの項目取得でした。
    ネーム単位で項目を減らすのはNGでしょうか?
    お手数おかけしてすみません。ご教授お願いします。

    キャンセル

  • 2017/01/30 09:27

    たとえば
    <input type="checkbox" name="c[]" value=1>
    <input type="checkbox" name="c[]" value=2>
    <input type="checkbox" name="c[]" value=3>
    とした場合、phpなどの場合受け側でcは任意の配列として受け取れます

    ただし、命題の通りc[]というnameで例えばvalue=1の
    チェックボックスにチェックしたらc[]全体が完了されてしまうと
    value=2や3をチェックすることができないかチェックしても
    要素数が減らないことになります。
    そのあたりのロジックがおかしいということです

    キャンセル

  • 2017/01/30 09:35

    あと、私は好きじゃないですが、checkboxの未チェックだったときの
    デフォルト値を渡す時にnameをかぶせて処理することがあるようです
    たとえば以下の場合、要素は設定されているとみるか、されていないとみるか
    判断が難しいところです
    <form>
    <input type="hidden" name="v" value="default_value">
    <input type="checkbox" name="v" value="my_value">
    <input type="submit" value="go">
    </form>
    <?PHP
    print_r($_GET);
    ?>

    キャンセル

  • 2017/01/30 12:05

    yamabejpさん
    レスありがとうございます。
    nameで判別するのは難しいということですね。
    勉強になります。
    このたびはありがとうございました!



    キャンセル

checkベストアンサー

0

HTMLも少し変更。

$( _=> {
    $( 'form' ).each( ( i, element ) => {
        const $_inputs = $( 'input, textarea, select', element );
        const $_input_textarea_select = $_inputs.not( '[type="radio"], [type="checkbox"]' );
        const radio_names = $.unique( $( '[type="radio"], [type="checkbox"]', element ).map( ( i, e ) => e.name ).get() );
        $_inputs.on( 'input change', _=> {
            let len = $_input_textarea_select.length + radio_names.length;
            let count = len;
            $_input_textarea_select.each( ( i, ele ) => {
                if ( $.trim( $( ele ).val() ) ) { count--; }
            } );
            $.each( radio_names, ( i, v ) => {
                if ( $_inputs.filter( '[name="' + v + '"]:checked' ).length ) { count--; }
            } );
            $( '.number', element ).html( '残り:' + count + ' / ' + len );
        } ).change();
    } );
} );
<form action="">
<div class="number">.number</div>
  <table>
    <tr>
      <th>ラジオボタン1</th>
      <td>
        <label><input type="radio" name="radio1">1-1</label>
        <label><input type="radio" name="radio1">1-2</label>
        <label><input type="radio" name="radio1">1-3</label>
      </td>
    </tr>
    <tr>
      <th>ラジオボタン2</th>
      <td>
        <label><input type="radio" name="radio2">2-1</label>
        <label><input type="radio" name="radio2">2-2</label>
        <label><input type="radio" name="radio2">2-3</label>
      </td>
    </tr>
    <tr>
      <th>テキスト1</th>
      <td><input name="text1" type="text" size="20" value="" /></td>
    </tr>

    <!--セレクト-->
    <tr>
      <th>セレクト1</th>
      <td><select name="select1">
          <option value="" selected="selected">-- 選択してください --</option>
          <option value="北海道">北海道</option>
          <option value="青森県">青森県</option>
          <option value="岩手県">岩手県</option>
          <option value="宮城県">宮城県</option>
          <option value="秋田県">秋田県</option>
          <option value="山形県">山形県</option>
          <option value="福島県">福島県</option>
          <option value="茨城県">茨城県</option>
          <option value="栃木県">栃木県</option>
          <option value="群馬県">群馬県</option>
          <option value="埼玉県">埼玉県</option>
          <option value="千葉県">千葉県</option>
          <option value="東京都">東京都</option>
          <option value="神奈川県">神奈川県</option>
          <option value="新潟県">新潟県</option>
          <option value="富山県">富山県</option>
          <option value="石川県">石川県</option>
          <option value="福井県">福井県</option>
          <option value="山梨県">山梨県</option>
          <option value="長野県">長野県</option>
          <option value="岐阜県">岐阜県</option>
          <option value="静岡県">静岡県</option>
          <option value="愛知県">愛知県</option>
          <option value="三重県">三重県</option>
          <option value="滋賀県">滋賀県</option>
          <option value="京都府">京都府</option>
          <option value="大阪府">大阪府</option>
          <option value="兵庫県">兵庫県</option>
          <option value="奈良県">奈良県</option>
          <option value="和歌山県">和歌山県</option>
          <option value="鳥取県">鳥取県</option>
          <option value="島根県">島根県</option>
          <option value="岡山県">岡山県</option>
          <option value="広島県">広島県</option>
          <option value="山口県">山口県</option>
          <option value="徳島県">徳島県</option>
          <option value="香川県">香川県</option>
          <option value="愛媛県">愛媛県</option>
          <option value="高知県">高知県</option>
          <option value="福岡県">福岡県</option>
          <option value="佐賀県">佐賀県</option>
          <option value="長崎県">長崎県</option>
          <option value="熊本県">熊本県</option>
          <option value="大分県">大分県</option>
          <option value="宮崎県">宮崎県</option>
          <option value="鹿児島県">鹿児島県</option>
          <option value="沖縄県">沖縄県</option>
        </select></td>
    </tr>

    <!--チェックボックス-->
    <tr>
      <th>チェックボックス1</th>
      <td>
        <label><input type="checkbox" name="cb1" value="1">1-1</label>
        <label><input type="checkbox" name="cb1" value="2">1-2</label>
        <label><input type="checkbox" name="cb1" value="3">1-3</label>
      </td>
    </tr>
  </table>
</form>

動くサンプル:https://jsfiddle.net/6j0cb1ow/1/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/29 18:44

    kei344さん
    この度もありがとうございます。
    やりたい事が実現できました。
    本当にありがとうございます!

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16461questions

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