Question

如何将我的复选框值添加到要添加的列表中？如果选中它，它将被添加到总数中，如果未选中则不会添加。或者如果已经检查过，那么客户取消选中它将从总数中扣除。

的javascript

function subtotal(){
$("#as").on('change',function(event){
    var as = $(event.target).val();
    var txt1 = $('#sff').val();
    var txt2 = $('#osf').val();
    var d = 0;

    if ($('#cbx3').is(":checked")) {
        d = parseFloat($("#cbx3").val(), 10);

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;


    $('#st').val(total.toFixed(2));  
});

HTML

<input type="text" id="txt1"/> //automatically shows value depending on a dropdownmenu
<input type="text" id="txt2"/> /automatically shows value depending on a dropdownmenu
<input type="text" id="gt"/> //this is where the answers shows

<input type="checkbox" id="cbx3"/>

<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>

total应该相当于，textbox1 + textbox2 + dropdownmenu +复选框我已设法添加文本框和下拉列表，现在关注的是复选框。

...三江源

Answer 1

你的HTML不清楚..请仔细阅读评论行并尝试这个..

$("#as").on('change',function(){ 
    var as = $(this).val(); //selected value on dropdown change
    var txt1 = $('#sff').val(); // need to give the id of html element(not in your given html)
    var txt2 = $('#osf').val(); // need to give the id of html element(not in your given html)
    var d = 0;

    if ($('#cbx3').is(":checked")) 
        d = parseFloat($("#cbx3").val(), 10); //it get the value from cbx3 element when it is checked otherwise value is 0

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;

  $('#gt').val(total.toFixed(2));  
});

Answer 2

您应该在每次更改下拉列表或复选框时调用的函数中进行计算。初始化时可以调用相同的函数。

function subtotal(){
    var as = $("#as").val();
    var txt1 = $('#sff').val();
    var txt2 = $('#osf').val();
    var d = 0;

    if ($('#cbx3').is(":checked")) {
        d = parseFloat($("#cbx3").val(), 10);

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;


    $('#st').val(total.toFixed(2));  
}; 

$("#as").on('change',function(event){
    subtotal();
}

$('#cbx3').click(function(){
    subtotal();
});

Answer 3

在修复相关项目的ID后，此代码计算结果

＆＃13;

$("#as").on('change', function(event) {
  var as = $(event.target).val();
  var txt1 = 0;
  var txt2 = 0;
  if ($('#txt1').val())
      txt1 = $('#txt1').val();
  if ($('#txt2').val())
     txt2 = $('#txt2').val();
  var d = 0;
 
  if ($('#cbx3').is(":checked")) {
    d = parseFloat($("#cbx3").val(), 10);
  }
  var a = parseFloat(as, 10);
  var b = parseFloat(txt1, 10);
  var c = parseFloat(txt2, 10);
  var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;


  $('#gt').val(total.toFixed(2));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" />
<br />
<input type="text" id="txt2" />
<br />
<input type="text" id="gt" />
<br />

<input type="checkbox" id="cbx3" value="5" />
<br />

<select id="as">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
<br />

＆＃13;

Answer 4

js fiddle example

$("#as").on('change', function (event) {
            subtotal();
        });
        $("#cbx3").click(function () {
            subtotal();
        });

        function subtotal() {

            var as = $("#as").val();
            var txt1 = $('#txt1').val();
            var txt2 = $('#txt2').val();
            var d = 0;
            if ($('#cbx3').is(":checked")) {
                d = parseFloat($("#cbx3").val(), 10);
                var a = parseFloat(as, 10);
                var b = parseFloat(txt1, 10);
                var c = parseFloat(txt2, 10);
                var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
                $('#gt').val(total);
            }
            else {
                $('#gt').val("0");
            }
        }

试试以上代码

Answer 5

这应该会给你一个想法。

＆＃13;

(function () {
    var $txt1 = $('#txt1');
    var $txt2 = $('#txt2');
    var $as = $('#as');
    var $cbx3 = $('#cbx3');
    var total = 0;

    function calc() {
        var as = Number($as.val());
        var txt1 = Number($txt1.val());
        var txt2 = Number($txt2.val());

        total = txt1 + txt2;

        if ($cbx3.is(":checked")) {
            total += as;
        }
        $('#gt').val(total.toFixed(2));
    }

    $('#txt1, #txt2, #as').on('keyup', function () {
        calc();
    });
    $('#cbx3, #as').on('change', function () {
        calc();
    });
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" id="txt1" /></div>
<div><input type="text" id="txt2" /></div>
<div><input type="text" id="gt" /></div>
<input type="checkbox" id="cbx3" />
<select id="as">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
</select>

＆＃13;

在复选框，文本框中添加值并使用javascript选择

5 个答案: