Jquery multiple checkbox get value in var or print in 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 !

回答1:

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

回答2:

Note that it is invalid html to use the same id for multiple elements. Select the checkboxes using their name attribute. On click of any checkbox loop through them all, and add the value of any checked ones. Note that the values need to be converted to numbers, which I do with the unary plus operator.

var $cbs = $('input[name="ch1"]');

$cbs.click(function() {
    var total = 0;
    $cbs.each(function() {
        if (this.checked)
            total += +this.value;
    });
    $("#usertotal").text(total);
});

Demo: http://jsfiddle.net/6GX7g/

回答3:

here you go:

WORKING DEMO jsfiddle

HTML:

<div id="container"><h1>Add-ons</h1>
<input type="checkbox" class="numbers" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" class="numbers" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" class="numbers" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" class="numbers" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>
User total usage: <span id="usertotal"> </span>

Jquery/javascript:

  var getCheckedBoxValues = function() {
   var values = []
   $(".numbers:checked").each(function() {
       values.push($(this).val());
   });
   return values;
   };
    $('.numbers').click(function () {
   $('#usertotal').html();        
   var usertotal = 0;                
   var values = getCheckedBoxValues();
    for(i = 0; i < values.length; i++) {
        usertotal += parseInt(values[i]);
    }
    $('#usertotal').html(usertotal);
  });

回答4:

try it:


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

来源：https://stackoverflow.com/questions/12063243/jquery-multiple-checkbox-get-value-in-var-or-print-in-span

标签

jquery

html

checkbox