0

以下のような HTML と JQuery コードがあります。

<form  action="" method="post" id="myform">
  <table border="0" class="table table-striped">
    <tr>
      <td colspan="7"><div class="title">CONNAISSANCE ET EXPERIENCE (O/E/AM/Cadres)</div></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>

    <tr>
      <td>
        <ul type="circle">
          <li>1. Des techniques et pratiques du métier</li>
        </ul>
      </td>
      <td></td>
      <td><input  type="radio" class="validate[required] radio" name="number1" id="number1" value="1"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="2"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="3"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="4"></td>
      <td><input name="number1" class="validate[required] radio" type="radio"  id="number1" value="5"></td>
    </tr>

    <tr>
      <td>
        <ul type="circle">
          <li>2. Capacité d’apprentissage et d’adaptation</li>
        </ul>
      </td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number2" value="1"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="5"></td>
    </tr>
    <tr>
      <td><ul type="circle">
          <li>3. Productivité/Rendement</li>
        </ul></td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number3" value="1"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="5" /></td>
    </tr>
    <tr>
      <td><ul type="circle">
          <li>4. Polyvalenc</li>
        </ul></td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number4" value="1"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="5"></td>
    </tr>

    <tr>
      <td colspan="7">
          <script>
                 $(document).ready(function(){
                    $("#test").click(function(){
                        var number1 = $('input[name=number1]:checked', '#myform').val();
                        var number2 = $('input[name=number2]:checked', '#myform').val();
                        var number3 = $('input[name=number3]:checked', '#myform').val();
                        var number4 = $('input[name=number4]:checked', '#myform').val();
                        var t1 = parseInt(number1);
                        var t2 = parseInt(number2);
                        var t3 = parseInt(number3);
                        var t4 = parseInt(number4);
                        var total = t1+t2+t3+t4;
                        alert (total);
                });
            });
          </script>

      <button name="btn" id="test">test</button>

      </td>
    </tr>

</table>
<form>

必要： 各ラジオボックスをクリックすると、送信ボタンをクリックすると、ラジオボックスのすべての値が合計されて表示されます。

問題 合計値を警告することしかできませんが、通常どおり表示できませechoん。この場合よりも優れたこのようなJQueryまたはPHPを使用する必要があります。ありがとう。

4

5 に答える 5

1

現在のページにフォームの結果を表示したい場合は、、、、を'append'使用'appendTo'でき'html'ます'text'

  1. http://api.jquery.com/append/
  2. http://api.jquery.com/appendTo/
  3. http://api.jquery.com/html/
  4. http://api.jquery.com/text/ //注: この場合、html はプレーン テキストとして追加されます

チェックされた値を見つけるために、このスクリプトを使用できます。

         $(document).ready(function() {
                $('#test').on('click',function(){
                    var $rez = $(".result");
                    $rez.html('')

                    $('#myform').find('input[type="radio"]').each(function(){
                        if($(this).attr('checked')=='checked')
                        {
                            $rez.append("class:"+$(this).attr('class'))
                            $rez.append("|name:"+$(this).attr('name'))
                            $rez.append("|value:"+$(this).attr('value'))

                                $rez.append("</br>")
                        }

                    });

                    return false;
             });
        });​

デモ: jsfiddle

于 2012-09-28T07:24:30.857 に答える
0

alert() の代わりに、隠しフィールドを使用して値をプッシュすると、ボタンをクリックすると、php ページで値が取得されます。

これをフォーム内のhtmlセクションに入れます

<input type="hidden" name="hid_total" id="hid_total" />

次に、alert() の代わりに以下のコードを使用します。

jQuery("hid_total").val(total);

値を html で表示する必要がある場合は、非表示の代わりにテキスト タイプを選択できます。

于 2012-09-28T07:32:57.630 に答える
0

データを表示するためにこのように使用します

$('#id_to_display').html(total);

これはあなたを助けるでしょう...

于 2012-09-28T07:24:19.357 に答える
0

それはあなたのために働く... 

 $("<div/>").html(total).appendTo('body');
于 2012-09-28T07:25:58.763 に答える
0

jQuery でアラートの後に、またはアラートの前に以下の行を追加します。

$('#mytotal').html(total);

テストボタンの前に下の行を追加します。

<div id="mytotal"></div>

それから試してみて、うまくいかない場合はお知らせください。

于 2012-09-28T07:29:16.807 に答える