Question

嗨，每个身体我新编码，这里我试图评估已选中复选框的值的总和，并将总和传递给html文本输入我不知道我怎么欣赏帮忙，这是我的代码：

 Aroma Massage:<input type="checkbox" name="Aroma massage" id="check1" value="55">
        Swedish Massage:<input type="checkbox" name="Swedish massage" id="check2" value="50">
        Hot Stone Massage:<input type="checkbox" name="Hot Stone massage" id="check3" value="70">
        Stress Recovery Massage:<input type="checkbox" name="Stress recovery massage" id="check4" value="25">
        Thai Massage:<input type="checkbox" name="Thai massage" id="check5" value="60">
        
        <div id="tot"></div>

Answer 1

你能检查一下你想要的是什么吗？让我知道

＆＃13;

var sum=0;
$('input[type=checkbox]').on('click',function(){
	if($(this).prop('checked')==true){
  sum += parseInt($(this).attr('value'));
}else{
  sum -= parseInt($(this).attr('value'));
}

  $('.sum').val(sum);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="60">
<input type="checkbox" value="20">
<input type="checkbox" value="30">
<input type="checkbox" value="50">

<input type="text" class="sum">

＆＃13;

Answer 2

$(document).ready(function () {
    // cache the inputs and bind the events
    var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
        // iterate and add it to sum only if checked
           if(this.checked)
               sum += parseInt(this.value);
        });
        $("#price").val(sum);
    });
});

Answer 3

只需使用此https://jsfiddle.net/82atpthr/

即可

添加此javascript

只需使用此https://jsfiddle.net/82atpthr/

即可

添加此javascript

var total = 0; 

function gettotal(item) {
    if(item.checked){
        total+= parseInt(item.value);
    } else {
        total-= parseInt(item.value);
    }
    //alert(total);
    document.getElementById('tot').innerHTML = total + " /-";
}

并将其添加到复选框onclick="gettotal(this);"

Answer 4

我为递归方法制作了一个vanilla JS解决方案（在Purushothaman的帖子中使用）。如果您有非常多的输入，您必须使用Rani Moreles Rubillos的解决方案，因为它将避免无用的循环。

document.addEventListener('click', listener, true);

function listener() {
  // get elements
  var elts = document.getElementsByTagName("input");
  // Reduce array of values
  var val = Object.keys(elts).map(
    function(key) {
      return elts[key]
    }).reduce(function(prev, curr) {
    return curr.checked ? prev + parseInt(curr.value) : prev
  }, 0);
  document.getElementById('tot').textContent = val
}

Aroma Massage:
<input type="checkbox" name="Aroma massage" id="check1" value="55">Swedish Massage:
<input type="checkbox" name="Swedish massage" id="check2" value="50">Hot Stone Massage:
<input type="checkbox" name="Hot Stone massage" id="check3" value="70">Stress Recovery Massage:
<input type="checkbox" name="Stress recovery massage" id="check4" value="25">Thai Massage:
<input type="checkbox" name="Thai massage" id="check5" value="60">

<div id="tot"></div>

Answer 5

试试这个

＆＃13;

 $val = 0;
    if(isset($_POST['chck1']){
        $val += $_POST['chck1'];
    }
    if(isset($_POST['chck2']){
        $val += $_POST['chck2'];
    }
    if(isset($_POST['chck3']){
        $val += $_POST['chck3'];
    }
    echo $val;

＆＃13;

将已选中复选框的总和传递给html文本输入

5 个答案: