Question

我希望它会显示如下

点击6month单选按钮Monthly repayment，Total payable，Above includes...将乘以1,2和3 分别
点击1 Year单选按钮Monthly repayment，Total payable，Above includes...将分别乘以2,3和4，依此类推，直到5 year

有人能纠正jQuery代码吗？我没有得到问题所在。

$("input:radio[name=radios]").click(function () {
    var value = $(this).attr("id");
    switch (value) {
        case 6:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 1;
            var totalpayment = priceValue * 2;
            var cmpfee = priceValue * 3;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
        case 1:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 2;
            var totalpayment = priceValue * 3;
            var cmpfee = priceValue * 4;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
        case 2:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 3;
            var totalpayment = priceValue * 4;
            var cmpfee = priceValue * 5;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
        case 3:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 4;
            var totalpayment = priceValue * 5;
            var cmpfee = priceValue * 6;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
        case 4:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 5;
            var totalpayment = priceValue * 6;
            var cmpfee = priceValue * 7;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
        case 5:
            var priceValue = $("#priceTextMin").val();
            var monthly = priceValue * 6;
            var totalpayment = priceValue * 7;
            var cmpfee = priceValue * 8;
            $('#monthly').val(monthly);
            $('#totalpayment').val(totalpayment);
            $('#cmpfee').val(cmpfee);
            break;
    }
});

.radio {
    display: inline-block;
    padding-right: 0px;
    font-size: 13px;
    line-height: 39px;
    cursor: pointer;
    font-weight: normal;
    padding: 0 !important;
    margin: 0 !important;
}

    .radio input {
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .radio .inner {
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        width: 10px;
        height: 10px;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        display: block;
        margin: 3px;
        border-radius: 50%;
        background-color: #70bbde;
        opacity: 0;
    }

    .radio .outer {
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin: 10px 9px 10px 10px;
        border: 2px solid #d2d6df;
        border-radius: 50%;
        background-color: #fff;
    }

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal instantquote" name="calculation">
    <h3>Get an instant quote</h3>
    <h4 class="margin-bottom-30">How much do you want to borrow?</h4>
    <div class="col-xs-12 form-group" style="padding-right: 0px;">
        <input id="priceTextMin" class="form-control input-xs" type="text" value="5000">
    </div>

    <div class="col-xs-12 form-group" style="padding-right: 0px;">
        <input type="range" min="5000" max="1000000" step="1000" value="0" id="priceSliderMin">
    </div>

    <div class="row">
        <label class="radio col-xs-2">
            <input id="sixmth" type="radio" name="radios" checked value="6">
            <span class="outer"><span class="inner"></span></span>6 Months</label>

        <label class="radio col-xs-2">
            <input id="oneyear" type="radio" name="radios" value="1">
            <span class="outer"><span class="inner"></span></span>1 year</label>

        <label class="radio col-xs-2">
            <input id="twoyear" type="radio" name="radios" value="2">
            <span class="outer"><span class="inner"></span></span>2 years</label>

        <label class="radio col-xs-2">
            <input id="threeyear" type="radio" name="radios" value="3">
            <span class="outer"><span class="inner"></span></span>3 years</label>

        <label class="radio col-xs-2">
            <input id="fouryear" type="radio" name="radios" value="4">
            <span class="outer"><span class="inner"></span></span>4 years</label>

        <label class="radio col-xs-2">
            <input id="fiveyear" type="radio" name="radios" value="5">
            <span class="outer"><span class="inner"></span></span>5 years</label>

        <div class="clearfix"></div>
    </div>
    <br />


    <div class="form-group">
        <label class="col-xs-3 control-label" for="">Monthly repayment</label>
        <div class="col-xs-6">
            <hr>
        </div>
        <div class="col-xs-3">
            <input id="monthly" class="form-control input-xs" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label" for="">Total payable</label>
        <div class="col-xs-6">
            <hr>
        </div>
        <div class="col-xs-3">
            <input id="totalpayment" class="form-control input-xs" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-5 control-label" for="">Above includes a completion fee of</label>
        <div class="col-xs-4">
            <hr>
        </div>
        <div class="col-xs-3">
            <input id="cmpfee" class="form-control input-xs" type="text">
        </div>
    </div>


</form>

Answer 1

您的代码中有几处错误

首先：

var value = $(this).attr("id"); // here based on your markup you should do
var value = $(this).attr("val");

第二个开关案例条件是字符串而不是数字

这是一个有效的fiddle

Answer 2

您的代码中存在一些错误。

1：input[name=radios]:radio 选择器应该是这个。所以click事件被触发了。

2：你的收音机中有字符串作为id。 =＆GT;开关盒不起作用。使用此$(this).attr("value")代替$(this).attr("id")

3：您还应该使用parseInt($(this).attr("value"))

解析无线电中的值

纠正这些并且应该有效。

请参阅jsfiddle

jQuery文本框velue乘以并在选中单选按钮上的另一个文本框中显示

2 个答案: