jQuery的複選框，並選擇 - 總和值，並添加VAR

的HTML代碼是：

<div id="container"><h1>Add-ons</h1> 
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br /> 
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br /> 
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br /> 
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br /> 
</div> 

<div> I want more add-ons 
<select id="more" name="more"> 
    <option value="0 QR">0</option> 
    <option value="30 QR">1</option> 
    <option value="50 QR">2</option> 
    <option value="100 QR">3</option> 
</select> 
<span id="span"></span> 
User total usage: <span id="usertotal"> </span>

的jQuery：

//For select   

function displayVals() { 
    var singleValues = $("#more").val();   
    $("#span").html("<b>more addons:</b> " + 
    singleValues); 
} 

$("select").change(displayVals); 
displayVals(); 

//For checkboxes 
var $cbs = $('input[name="ch1"]'); 
$cbs.click(function() { 
    var total = 0; 
    $cbs.each(function() { 
    if (this.checked) 
     var singleValues = $("#more").val(); 
     total += +this.value + singleValues; 
    }); 
    $("#usertotal").text(total); 
});

我想用戶總使用量：創建複選框的總和並添加選項的值，以便如果我選中複選框1和2加上選項1，我將在用戶總用法中寫入：60.

來源

2012-08-22 user1615346

不要忘記跟進我們給你的建議[昨天]（http://stackoverflow.com/q/12063243/615754）：改變你的元素ID屬性，使它們都是唯一的。 – nnnnnn

我創建了一個fiddle爲您的代碼。

希望這是你想要的。

HTML：

<div id="container"><h1>Add-ons</h1> 
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br /> 
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br /> 
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br /> 
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br /> 
</div> 

<div> I want more add-ons 
<select id="more" name="more"> 
    <option value="0">0</option> 
    <option value="30">1</option> 
    <option value="50">2</option> 
    <option value="100">3</option> 
</select> 
<span id="span"></span> 
User total usage: <span id="usertotal"> </span>

的Javascript：

function displayVals() { 
     calcUsage(); 
     var singleValues = $("#more").val();   
     $("#span").html("<b>more addons:</b> " + 
        singleValues + ' QR'); 
} 
var $cbs = $('input[name="ch1"]'); 
function calcUsage() { 
    var total = $("#more").val(); 
    $cbs.each(function() { 
     if (this.checked) 
      total = parseInt(total) + parseInt(this.value); 
    }); 
    $("#usertotal").text(total + ' QR'); 
} 

    $("select").change(displayVals); 
    displayVals(); 
//For checkboxes 

$cbs.click(calcUsage);

來源

2012-08-22 05:33:44 Vins

謝謝你很多 – user1615346

這裏是你的答案

Working Demo

$('input:checkbox').change(function(){ 
var tot=0; 
$('input:checkbox:checked').each(function(){ 
tot+=parseInt($(this).val()); 
}); 
tot+=parseInt($('#more').val()); 
$('#usertotal').html(tot) 
}); 

$('#more').change(function(){ 
    $('input:checkbox').trigger('change'); 
});

來源

2012-08-22 05:30:01 Ashirvad

這對我來說最合適，因爲我不僅擁有多個複選框，還擁有多個下拉菜單。這很容易計算一切。 –

我相信你只是錯過了一次阻擋在each功能您if語句：你不想增加total除非this.checked是真實的。此外，您要將所有字符串轉換爲數字，以便您不會從+獲得字符串連接 - 我已使用parseInt。此外，從你的描述，好像你只是想通過循環從option一次，而不是每次添加值，所以用它來初始化total：

$cbs.click(function() 
{ 
    var total = parseInt($("#more").val()); 

    $cbs.each(function() 
    { 
     if (this.checked) 
      total += parseInt(this.value); 
    }); 

    $("#usertotal").text(total); 
});

但是你也想這樣做這種計算和更新時select變化，所以你應該拉這個循環到一個單獨的函數，並調用它使用click：

function calculateTotal() 
{ 
    var total = parseInt($("#more").val()); 

    $cbs.each(function() 
    { 
     if (this.checked) 
      total += parseInt(this.value); 
    }); 

    $("#usertotal").text(total); 
} 

$("#more").change(calculateTotal); 
$cbs.click(calculateTotal);

來源

2012-08-22 05:30:09 pb2q

根據OP的描述，他或她並不是真的想在每個循環迭代中添加'singleValues'，只需要將其添加到總共一次。（所以你可以初始化'var total = + $（「＃more」）。val（）;'並刪除'singleValues'變量... – nnnnnn

試試這個

$("select").change(function() { 
    $('input[name="ch1"]').change(); // trigger change to recalculate 
}); 
$('input[name="ch1"]').change(function() { 
    var singleValues = 0; 
    $('input[name="ch1"]:checked').each(function() { // loop through checked inputs 
     singleValues = +this.value + singleValues; 
    }); 
    singleValues += (+$('#more').val().replace('QR', '').trim()); // add drop down to checked inputs 
    $("#usertotal").text(singleValues); 
});

http://jsfiddle.net/wirey00/5s8qr/

來源

2012-08-22 05:30:42

JsFiddle

HTML：

<div id="container"><h1>Add-ons</h1> 
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br /> 
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br /> 
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br /> 
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br /> 
</div> 

<div> I want more add-ons 
<select id="more" name="more"> 
    <option value="0">0</option> 
    <option value="30">1</option> 
    <option value="50">2</option> 
    <option value="100">3</option> 
</select> 
<span id="span"></span> 
User total usage: <span id="usertotal"> </span>

的Javascript：

function displayVals() { 
     calcUsage(); 
     var singleValues = $("#more").val();   
     $("#span").html("<b>more addons:</b> " + 
        singleValues + ' QR'); 
} 
var $cbs = $('input[name="ch1"]'); 
function calcUsage() { 
    var total = $("#more").val(); 
    $cbs.each(function() { 
     if (this.checked) 
      total = parseInt(total) + parseInt(this.value); 
    }); 
    $("#usertotal").text(total + ' QR'); 
} 

    $("select").change(displayVals); 
    displayVals(); 
//For checkboxes 

$cbs.click(calcUsage);

來源

2012-08-22 06:01:24 Apurv

我已經完成了上述查詢的完整倉位。這裏也是演示鏈接。

演示：http://codebins.com/bin/4ldqp85

HTML

<div id="container"> 
    <h1> 
    Add-ons 
    </h1> 
    <input type="checkbox" name="ch1" value="10" id="qr1" /> 
    Add-on Number 1 - 10 QR 
    <br /> 
    <input type="checkbox" name="ch1" value="20" id="qr1" /> 
    Add-on Number 2 - 20 QR 
    <br /> 
    <input type="checkbox" name="ch1" value="40" id="qr1" /> 
    Add-on Number 3 - 40 QR 
    <br /> 
    <input type="checkbox" name="ch1" value="60" id="qr1" /> 
    Add-on Number 4 - 60 QR 
    <br /> 
</div> 
<div> 
    I want more add-ons 
    <select id="more" name="more"> 
    <option value="0 QR"> 
     0 
    </option> 
    <option value="30 QR"> 
     1 
    </option> 
    <option value="50 QR"> 
     2 
    </option> 
    <option value="100 QR"> 
     3 
    </option> 
    </select> 
    <span id="span"> 
    </span> 
    User total usage: 
    <span id="usertotal"> 

    </span> 
</div>

JQuery的

$(function() { 
    $('input[name="ch1"]:checkbox').change(function() { 
     var total = 0; 
     $('input[name="ch1"]:checked').each(function() { 
      total += parseInt($(this).val()); 
     }); 
     total += parseInt($('#more').val()); 
     $('#usertotal').html(total); 
    }); 
    $('#more').change(function() { 
     var selectVal = $(this).val().trim(); 
     if (parseInt(selectVal) > 0) { 
      $("#span").html("<b>more addons:</b> " + selectVal); 
     } else { 
      $("#span").html(""); 
     } 
     $('input[name="ch1"]:checkbox').trigger('change'); 
    }); 
});

演示：http://codebins.com/bin/4ldqp85

來源

2012-08-22 07:47:04 gaurang171

jQuery的複選框，並選擇 - 總和值，並添加VAR

回答

相關問題