Question

我有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。谢谢。

Answer 1

如果您想在当前页面显示表单结构，可以使用'append'，'appendTo'，'html'，'text'

http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/html/
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;
             });
        });

DEMO： jsfiddle

Answer 2

像这样使用来显示数据

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

这会帮助你......

Answer 3

它适合你...

 $("<div/>").html(total).appendTo('body');

Answer 4

在jQuery中警告之后或之前添加以下行。

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

在测试按钮之前添加以下行。

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

然后尝试一下，如果不能正常工作，请告诉我。

Answer 5

您可以使用隐藏字段而不是alert（），然后将值推送到该字段，然后点击按钮，您将在php页面中获取该字段。

将此内容放在表格

中的html部分

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

然后使用以下代码代替alert（）。

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

如果您需要在html中显示值，您可以选择文本类型而不是隐藏

使用JQuery显示单选框值

5 个答案: