Question

我想在点击复选框时插入价格和天数。但如果一旦工作，另一个工作不正常。我想在id =＆＃34; amount＆＃34;中插入价格和天是id =＆＃34;天＆＃34;。请给出一个很好的解决方案，谢谢。

<div class="dis_process">
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="100" value="5"> <span>Gift Pack</span>

        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="100"> <span class="input-group-addon">$</span>

            </div>
        </div>
        <div class="col-md-4">
            <p>5 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="500" value="10"> <span>Custom Logo</span>

        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="300"> <span class="input-group-addon">$</span>

            </div>
        </div>
        <div class="col-md-4">
            <p>10 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="50" value="7"> <span> Color Box Packing</span>

        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="50"> <span class="input-group-addon">$</span>

            </div>
        </div>
        <div class="col-md-4">
            <p>7 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <p>Total Amount</p>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <div id="amount"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="days"></div>
        </div>
    </div>
    <hr />
</div>

Answer 1

jsFiddle

我相信这就是你想要的，点击你发起一个事件，然后拉出你设置的属性。从那里我们检查是否选中或取消选中复选框并添加或减去。

<强> JS

// Global JS variables to store totalCost and totalDays
var totalCost = 0;
var totalDays = 0;

// Event for when any checkbox is checked
$(':checkbox').on('click', function() {
    // pull the number of days from the value of the checkbox input
    var days = $(this).val();
    // pull the cost from the attribute rel
    var cost = $(this).attr('rel');

    // see if the checkbox is checked or not add or subtract
    if(this.checked) {
        totalCost += parseInt(cost);
        totalDays += parseInt(days);
    } else {
        totalCost -= parseInt(cost)
        totalDays -= parseInt(days);
    }

    // set the text of the amount and days to the cost and days
    $('#amount').text(totalCost);
    $('.days').text(totalDays);
});

<强> HTML

<div class="dis_process">
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="100" value="5" /> 
            <span>Gift Pack</span>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="100"/> <span class="input-group-addon">$</span>
            </div>
        </div>
        <div class="col-md-4">
            <p>5 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="500" value="10"/> <span>Custom Logo</span>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="300"/> <span class="input-group-addon">$</span>
            </div>
        </div>
        <div class="col-md-4">
            <p>10 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <input type="checkbox" rel="50" value="7"/> <span> Color Box Packing</span>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="50"/> <span class="input-group-addon">$</span>
            </div>
        </div>
        <div class="col-md-4">
            <p>7 days Extra</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-5">
            <p>Total Amount</p>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <div id="amount"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="days"></div>
        </div>
    </div>
    <hr />
</div>

jQuery日和金额计算？

1 个答案:

jsFiddle