Jquery多个复选框获取var或打印在span中的值 [英] Jquery multiple checkbox get value in var or print in span

问题描述

html的代码是：

 < div id =container>< h1> Add-ons< ; / h1> 
< input type =checkboxname =ch1value =10id =qr1/> Add-on Number 1  -  10 QR< br /> 
< input type =checkboxname =ch1value =20id =qr1/> Add-on Number 2  -  20 QR< br /> 
< input type =checkboxname =ch1value =40id =qr1/> Add-on Number 3  -  40 QR< br /> 
< input type =checkboxname =ch1value =60id =qr1/> Add-on Number 4  -  60 QR< br /> 
< / div> 
 
< div>我想要更多的附件
< select id =morename =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> 
用户总使用量：< span id =usertotal> < / span> 
  

Jquery：

 code> //对于select 
 
 function displayVals（）{
 var singleValues = $（＃more）。 
 $（＃span）。html（< b> more addons：< / b>+ 
 singleValues）; 
} 
 
 $（select）。change（displayVals）; 
 displayVals（）; 
 //对于复选框
 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）。 ）; 
}）; 
  

我想在用户总使用：创建复选框的总和，该选项使得如果我选择1复选框和2加选项1我将写入用户总使用：60。
提前感谢您！

解决方案

工作演示： http://jsfiddle.net/GNDAG/

希望它有所帮助。您可以阅读有关的详情 此处。 / p>

但是，像@nnnnnn提到的，你的html是不正确的 - ID属性需要是唯一的。

代码

  $（'input [type =checkbox （）{
 if（$（this）.is（'））{
 var total_span = 0; 
 $（'input [type =checkbox ：checked'））{
 total_span + = parseInt（$（this）.prop（'value'），10）; 
} 
}）; 
 
 $（＃usertotal）。html（total_span）; 
}）; 
  

the code for html is :

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

I want at the user total usage: to create the sum of the checkboxes and add with the value of the option so that if I select 1 checkbox and 2 plus option 1 I will have written in user total usage: 60 . Thank YOU in advance !

解决方案

working demo: http://jsfiddle.net/GNDAG/

Hope it helps. You can read more about each here.

However, like @nnnnnn mentioned, your html isn't right -- ID attributes need to be unique.

Code

$('input[type="checkbox"]').change(function() {
   var total_span = 0;
    $('input[type="checkbox"]').each(function() {
        if ($(this).is(':checked')) {
            total_span += parseInt($(this).prop('value'), 10);
        }
    });

    $("#usertotal").html(total_span);
});​

这篇关于Jquery多个复选框获取var或打印在span中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！