2

説明はコードの下にあります：

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

6 に答える 6

6

私はあなたのコードのフィドルを作成しました。

これがあなたが望んでいたものであることを願っています。

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-22T05:33:44.310 に答える
3

これがあなたの答えです

作業デモ

  $('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-22T05:30:01.087 に答える
0

上記のクエリに対して完全なビンを作成しました。こちらもデモリンクです。

デモ： 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-22T07:47:04.090 に答える
0

if関数内のステートメントのブロックが欠落しているだけだと思います。trueでない限りeach、インクリメントしたくありません。さらに、すべての文字列を数値に変換して、文字列の連結を取得しないようにします-私はを使用しました。また、あなたの説明から、ループを通過するたびではなく、一度だけ値を追加したいようですので、それを使用して初期化します：totalthis.checked+parseIntoption 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-22T05:30:09.930 に答える
0

これを試して

$("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-22T05:30:42.657 に答える
0

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-22T06:01:24.953 に答える