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>

我需要： 当我点击每个单选框然后我点击按钮提交时，它将汇总单选框的所有值并显示它。

问题 我只能提醒总和值，但无法正常显示。示例：当我想显示我总是使用的值时的 PHP 代码，echo但对于 JQuery 我还不知道。所以请任何人帮助我。给我一些想法，我应该使用像这样的 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

像这样使用来显示数据

$('#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 回答
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 回答