Question

我是jQuery的新手，并试图为汽车租赁成本制作一个简单的计算器。它应该取一个人输入的数字，并乘以他们选择的汽车的价值，点击。以下是我的内容：

 <form>
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input name="type" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="type" value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="type" value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="type" value="800" type="radio"> BMW 535i</label>
                <label><input name="type" value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

这是我的jquery，我无法开始工作

<script>
$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('select[name=type]').val();
        var b = $('input[name=kilo]').val();
        var total = a * b;
        $('#total').text(total);
    }                
);
});
</script>

Answer 1

尝试下面提到的更改：
将此代码var a = $('select[name=type]').val();更改为var a = $('input[name=type]:checked').val();。

＆＃13;

$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('input[name=type]:checked').val();
       
        var b = $('input[name=kilo]').val();
        
        var total = a * b;
         $('#total').text(total);
    }                
);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input name="type" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="type" value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="type" value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="type" value="800" type="radio"> BMW 535i</label>
                <label><input name="type" value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

＆＃13;

Answer 2

请参阅小提琴Fiddle

＆＃13;

$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('input[name=radioName]:checked').val();
        var b = $('input[name=kilo]').val();
        var total = a * b;
        $('#total').text(total);
    }                
);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input  name="radioName" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="radioName"  value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="radioName"  value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="radioName" value="800" type="radio"> BMW 535i</label>
                <label><input name="radioName"  value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

＆＃13;

jQuery输入字段计算

2 个答案: