Question

我有以下代码，非常适合添加复选框的值。如何向其添加实际输入框：

如果在输入中输入100，则会在#total

中添加100

并在选中时仍添加所有复选框

HTML

<form action="" id="products">
<label><input type="checkbox" name="prod1" value="10" />$10 product 1</label>
<br />
<label><input type="checkbox" name="prod2" value="20" />$20 product 2</label>
<br />
<label><input type="checkbox" name="prod3" value="30" />$30 product 3</label>
<br />
<label><input type="checkbox" name="prod3" value="30" />$30 product 3</label> 
</form>

<p>Total $<span id="total">0</span></p>

JQUERY

$(function(){
    $('#products').on('change', function(){
        var total = 0;
        $(this).find('input:checkbox:checked').each(function(){
            total += parseFloat($(this).val());
        });
        $('#total').text(total);
    });
});

我想加入：

<input id="prod4" type="number" value="">

$( "#prod4" )
  .keyup(function() {
    var value = $( this ).val()*6.5;
    $( "p" ).text( value );
  })
  .keyup();

我希望复选框和输入使用.keyup函数，以便#total自动更新。谢谢你的帮助。

Answer 1

我是这样做的，希望它可以帮到你！

<form action="" id="products">
<label><input type="checkbox" name="prod1" value="10" />$10 product 1</label>
<br />
<label><input type="checkbox" name="prod2" value="20" />$20 product 2</label>
<br />
<label><input type="checkbox" name="prod3" value="30" />$30 product 3</label>
<br />
<label><input type="checkbox" name="prod3" value="30" />$30 product 3</label> 
<br />
<input id="prod4" type="number" value="" />
</form>
<p>Total $<span id="total">0</span></p>

对于JQuery部分：

$(function(){
function sum() {
    var total = 0;
    $('#products').find('input:checkbox:checked').each(function(){
        total += parseFloat($(this).val());
    });

    var input = $('#prod4').val();

    if (input != "") {
        total += parseFloat(input);
    }

    $('#total').text(total);
}

$('#products').on('change', sum);
$('#prod4').keyup(sum);
});

keyup显示输入和复选框的总值

1 个答案: