jQuery简单计算功能

Question

I want to compute and display a simple jquery function here but its not showing up.

This is the jQuery code:

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);

And this is the form code where I want to implement it and show the calculated value.

        <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 />

I want this jquery to compute the values and display in the <input type="text" id="total" value="" disabled> . But its not showing. Please help me up with this.

Answer 1

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

Answer 2

$(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 />

Have added some dummy values to check your function.

Answer 3

You could try

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

Answer 4

The problem is that you are trying to get value from input radio element by id .
The identifiers of your radio elements are not consists with those which are presented within compute() function. Besides, you should get radio element's value by checking checked state.
Change your code as shown below:

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);