0

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と入力します。前もって感謝します ！

4

4 に答える 4

3

複数の要素に同じIDを使用することは無効なhtmlであることに注意してください。name属性を使用してチェックボックスを選択します。チェックボックスをクリックすると、それらすべてをループし、チェックされたものの値を追加します。値を数値に変換する必要があることに注意してください。これは、単項プラス演算子を使用して行います。

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

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

デモ： http： //jsfiddle.net/6GX7g/

于 2012-08-21T21:28:33.390 に答える
0 
try it:


$('input:checkbox').change(function(){ 
var tot=0;
$('input:checkbox:checked').each(function(){
tot+=parseInt($(this).val());
});
$('#usertotal').html(tot)
});
于 2012-08-21T21:28:35.013 に答える
0

作業デモ： http： //jsfiddle.net/GNDAG/

それが役に立てば幸い。each あなたはここでもっと読むことができます。

ただし、@ nnnnnnで説明したように、HTMLは正しくありません。ID属性は一意である必要があります。

コード 

$('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);
});​
于 2012-08-21T21:31:30.943 に答える
0

どうぞ：

ワーキングデモ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);
  });
于 2012-08-21T21:55:37.993 に答える