Question

我有三个单选按钮来计算费用。当你点击第一个单选按钮时，它有一个带有复选框的下拉菜单，如果你单击复选框它会增加$ 3 ..如果用户意识到这是一个错误并且没有取消选中该复选框并单击另一个单选按钮它不会删除总计3美元，直到点击单选按钮至少两次。

前两个单选按钮是78.25，第三个是88.25。单击第一个单选按钮78.25，然后复选框将使其成为81.25，然后假装您的用户改变主意并点击第二个单选按钮，它应该在您单击时将其更改回78.25。但它没有，它保持81.25，如果你点击第三个单选按钮，它最终实现它并纠正自己？

我已将其设置为在选中另一个单选按钮时取消选中该复选框但由于某种原因，费用不会立即更改并因某种原因而延迟。有人可以帮忙吗？

如果有人有任何建议或意见，我们将不胜感激！

http://jsfiddle.net/Ln1fnstb/2/

＆＃13;

$(function(){   //added by me
        $('#brandnewrv').click(function(){   
           calculateTotal();   
        });
    });

function rvsPrice()
{
    var rvPrice=0;
    var theForm = document.forms["form"];
    var brandnewRv = document.getElementById('brandnewrv');
    if(brandnewRv.checked==true)
    {
        rvPrice=3;
    }
    return rvPrice;
}
//Setting Proof of Ownership Prices
 //Set up an associative array
 var title_prices = new Array();
 title_prices["MCO"]=78.25;
 title_prices["FL Title"]=78.25;
 title_prices["OOS Title"]=88.25;
 
 // Proof of Ownership Radio Buttons
function getProofOfOwnership()
{  
    var proofOfOwnership=0;
    //Get a reference to the form id="form"
    var theForm = document.forms["form"];
    //Get a reference to the title the user Chooses name=ownerShip":
    var ownerShip = theForm.elements["ownership"];
    //Here since there are 4 radio buttons ownerShip.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < ownerShip.length; i++)
    {
        //if the radio button is checked
        if(ownerShip[i].checked)
        {
            proofOfOwnership = title_prices[ownerShip[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the proofOfOwnership
    return proofOfOwnership;
}
function calculateTotal()
{

    var titleFees = rvsPrice() + getProofOfOwnership();
    


    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
    <label><strong>Proof of Ownership</strong></label><br />
                <label class='radiolabel'><input type="radio"  name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Manufacturer's Statement of Origin&nbsp;&nbsp;</label>
                <label class='radiolabel'><input type="radio"  name="ownership" value="FL Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Florida Certificate of Title&nbsp;&nbsp;</label>
                <label class='radiolabel'><input type="radio"  name="ownership" value="OOS Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Out-of-state Certificate of Title&nbsp;&nbsp;</label>
    
    <div id="div3" style="display:none">
<div class="clearfix">
       <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
</select>

            
</div>
</div>

<div id="div4" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<div id="div5" style="display:none">
<p><label for='brandnewrv' class="inlinelabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check if Brand new RV/Motor Home</label>
   <input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" /></p>
               
</div>
    <div id="totalPrice"></div>
    
    <script type="text/javascript">
function statedropDown(ownership) {
    if (ownership == "OOS Title") {
        document.getElementById("div3").style.display = 'block';
        document.getElementById("div4").style.display = 'none';
		document.getElementById("div5").style.display = 'none';
		document.getElementById("brandnewrv").checked = false;
		rvsPrice(); 
    } 
    else if (ownership == "FL Title") {
        document.getElementById("div4").style.display = 'block';
        document.getElementById("div3").style.display = 'none';
		document.getElementById("div5").style.display = 'none';
		document.getElementById("titlestates").selectedIndex = 0;
		document.getElementById("brandnewrv").checked = false;
		rvsPrice(); 
    }
	else if (ownership == "MCO") {
        document.getElementById("div5").style.display = 'block';
        document.getElementById("div3").style.display = 'none';
		document.getElementById("div4").style.display = 'none';
		document.getElementById("titlestates").selectedIndex = 0;
    }
}
</script>
</form>

＆＃13;

Answer 1

我认为有一些复杂性比需要的复杂。我认为单选按钮实际上只需要一个“click”处理程序，它可以调用“statedropDown”函数的修改版本，而不需要“更改”处理程序。应该更改“statedropDown”函数，以便在结束时调用“calculateTotal（）”。引用“titlestates”的那一行需要在小提琴中注释掉，因为DOM的那部分不存在。

<label class='radiolabel'>
<input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="statedropDown(this.value)">Manufacturer's Statement of Origin&nbsp;&nbsp;</label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="FL Title" onclick="statedropDown(this.value)">Florida Certificate of Title&nbsp;&nbsp;</label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="OOS Title" onclick="statedropDown(this.value)">Out-of-state Certificate of Title&nbsp;&nbsp;</label>

然后

function statedropDown(ownership) {
    if (ownership == "OOS Title") {
        document.getElementById("div3").style.display = 'block';
        document.getElementById("div4").style.display = 'none';
        document.getElementById("div5").style.display = 'none';
        document.getElementById("brandnewrv").checked = false;
    } else if (ownership == "FL Title") {
        document.getElementById("div4").style.display = 'block';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div5").style.display = 'none';
        //document.getElementById("titlestates").selectedIndex = 0;
        document.getElementById("brandnewrv").checked = false;
    } else if (ownership == "MCO") {
        document.getElementById("div5").style.display = 'block';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div4").style.display = 'none';
        //document.getElementById("titlestates").selectedIndex = 0;
    }
    calculateTotal();
}

Here is the updated fiddle.（我在修补它时改变了其他一些小事，但我认为上述变化是关键。）

单选按钮费用清关

1 个答案: