通過勾選複選框的總和HTML文本輸入

嗨身體每一個新的編碼，這裏即時試圖評估複選框的值的總和並將總和傳遞給HTML文本輸入我不沒有如何欣賞幫助，這是我的代碼：通過勾選複選框的總和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>

來源

2016-11-01 Abdallah Abu Hazeem

$(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); 
 
    }); 
 
});

來源

2016-11-01 09:07:17 Purushothaman

你可以檢查，如果你想要的是類似這樣的？讓我知道

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

 
    $('.sum').val(sum); 
 
})

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

來源

2016-11-01 09:01:10

@Abdallah阿布Hazeem請檢查如果這是你想要的東西。 –

只是用這個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);"

來源

2016-11-01 09:09:58

我做的遞歸方法（在Purushothaman的帖子使用）的香草JS的解決方案。如果你有很多輸入，你必須使用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>

來源

2016-11-01 09:31:21

試試這個

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

來源

2016-11-11 05:44:06

通過勾選複選框的總和HTML文本輸入

回答

相關問題