jquery简单的计算功能

时间:2016-01-18 11:46:59

标签: javascript php jquery html jquery-plugins

我想在这里计算并显示一个简单的jquery函数,但它没有显示出来。

这是jQuery代码:

function compute() {
      var a = $('#a').val();
      var b = $('#pln').val();
      var c = $('#c').val();
      var d = a*b;
      var total = d+c;
      $('#total').val(total.toFixed(2));
    }
$('#a, #b, #c, #d').change(compute);

这是我想要实现它并显示计算值的表单代码。

        <div>
          <label style="margin-top: 25px;">Timer duration</label>
          <input type="radio" id="mc a" name="optionsRadios" value="<?php echo $at_fetch['at_mc']; ?>" style="margin-left: -170px; margin-top: 3px;">
          <font style='margin-left: -170px; font-family: "Lucida Sans Unicode",Arial;'><?php echo $at_fetch['at_mc']; ?> secs (Micro Ads)</font><br />
          <input type="radio" id="mn a" name="optionsRadios" value="<?php echo $at_fetch['at_mn']; ?>" style="margin-left: -170px; margin-top: 3px;">
          <font style='margin-left: -170px; font-family: "Lucida Sans Unicode",Arial;'><?php echo $at_fetch['at_mn']; ?> secs (Mini Ads)</font><br />
          <input type="radio" id="sd a" name="optionsRadios" value="<?php echo $at_fetch['at_sd']; ?>" style="margin-left: 62px; margin-top: 3px;">
          <font style='margin-left: -170px; font-family: "Lucida Sans Unicode",Arial;'><?php echo $at_fetch['at_sd']; ?> secs (Standard Ads)</font><br />
          <input type="radio" id="fd a" name="optionsRadios" value="<?php echo $at_fetch['at_fd']; ?>" style="margin-left: 62px; margin-top: 3px;">
          <font style='margin-left: -170px; font-family: "Lucida Sans Unicode",Arial;'><?php echo $at_fetch['at_fd']; ?> secs (Fixed Ads)</font><br />
        </div>

        <div style="margin-top: -60px;">
          <label>Choose plan</label>
          <select name="" id="pln" class="select-box" style="margin-top: -40px;"  />
          <option value="0">Choose clicks</option>
          <?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
          <option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
          <?php } ?>
          </select>
        </div>


        <div>
          <label>Fees</label>
          $<?php echo $paf_fetch['paf_fees']; ?>
          <input type="hidden" id="c" value="<?php echo $paf_fetch['paf_fees']; ?>" />
        </div>


        <div>
          <label>Total
          <input type="text" id="total" value="" disabled>
        </div></label>
        <br /><br />

我希望这个jquery计算值并显示在<input type="text" id="total" value="" disabled>中。但它没有表现出来。请帮帮我。

4 个答案:

答案 0 :(得分:0)

试试这个:$('#total').html(total.toFixed(2));

答案 1 :(得分:0)

$(document).ready(function () {
    $('#total').val("");
    $('input[name="optionsRadios"], #pln').change(function () {            
        var a = parseInt($(this).val(), 10);
        var b = parseInt($('#pln').val(), 10);
        var c = parseInt($('#c').val(), 10);
        var d = a * b;
        var total = d + c;
        $('#total').val(total.toFixed(2));
    });
});

html

          <label style="margin-top: 25px;">Timer duration</label>
      <br />

      <table>
<tr>
    <td> <input type="radio" id="mc_a" name="optionsRadios" value="1">   </td>
    <td>  secs (Micro Ads)</td>
</tr>

          <tr>
              <td>  <input type="radio" id="mn a" name="optionsRadios" value="2" ></td>
              <td>secs (Mini Ads)</td>
          </tr>
                <tr>
              <td><input type="radio" id="sd a" name="optionsRadios" value="3" ></td>
              <td> secs (Standard Ads)</td>
          </tr>
  <tr>
              <td> <input type="radio" id="fd a" name="optionsRadios" value="4" ></td>
              <td> secs (Fixed Ads)</td>
          </tr>
      </table>






          <label>Choose plan</label>
          <select name="" id="pln" class="select-box"  />
          <option value="0">Choose clicks</option>

          <option value="10">10</option>

          <option value="20">20</option>

          <option value="30">40</option>

          <option value="50">50</option>

          </select>



        <div>
          <label>Fees</label>

          <input type="text" id="c" value="22" />
        </div>


        <div>
          <label>Total
          <input type="text" id="total" value="" disabled>
        </div></label>
        <br /><br />

添加了一些虚拟值以检查您的功能。

答案 2 :(得分:0)

你可以尝试

   var total = a+b;                  
   $('#total :input').attr('value',total); 

答案 3 :(得分:0)

问题是您试图通过radio从输入id元素获取值。
您的radio元素的标识符不包含在compute()函数中显示的标识符。此外,您应该通过检查radio状态来获取checked元素的值。
更改您的代码,如下所示:

function compute() {
      var a = $("input[name='optionsRadios']:checked").val(),
          b = $('#pln').val(),
          c = $('#c').val(),
          d = a*b,
          total = d+c;
      $('#total').val(total.toFixed(2));
    }
$('input[name='optionsRadios'], #c, #pln').change(compute);