如何在文本框中选择不同的单选按钮时传递不同的值

我正在处理不同的单选按钮，我如何在选择单选按钮时传递不同的值，比如如果用户选择国内，那么传递到所有文本框的值将是2 n如果用户选择了一个内置单选按钮，那么传递到3的值就可以了，以此类推。该值传递意味着，如果用户在文本框名称text1中输入任何值，则用户输入的值与用户选择的单选按钮的值相乘，然后显示在下面的文本框中。如果用户选择了不同的单选按钮，则raddio按钮的值和文本框中输入的值相乘。

我的代码：

    <style>
div {
    margin: 10px 0;
}
div label {
    width: 140px;
    display: inline-block;
    text-align: right;
}
input[readonly] {
    background: #eee;
}
</style>
<script type="text/javascript" src="jquery.min2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#loads').closest('div').hide();
    $('input[name="myradio"]').change(function(){
        if($('input[name="myradio"]:checked').val() == '100')
            $('#loads').closest('div').hide();
        else
            $('#loads').closest('div').show();
    });
    $('#btn-calculate').click(function(){
        var units = parseInt( $('#units').val() );
        var radioVal = $('input[name="myradio"]:checked').val();
        $('input[readonly]').each(function(){
            var val = units * radioVal * ($(this).data('value') ? $(this).data('value') : 100);
            $(this).val(val);
        });
    });
});
</script>

  <form method="POST" name="form1">
<label>Select your category:</label>
    <label class="radio">
        <input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
    <label class="radio">
        <input type="radio" value="200" name="myradio" />a</label>
    <label class="radio">
        <input type="radio" value="300" name="myradio" />b</label>
    <label class="radio">
        <input type="radio" value="400" name="myradio" />c</label>
    <div>
        <label for="units">No of units(kwh) used</label>
        <input type="text" name="units" id="units" />
    </div>
    <div>
        <label for="loads">Connected loads(kwh)</label>
        <input type="text" name="loads" id="loads" />
    </div>
    <div>
        <label for="actual">Actual</label>
        <input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
    </div>
    <div>
        <label for="tax">Tax</label>
        <input type="text" readonly="readonly" name="tax" id="tax" />
    </div>
    <div>
        <label for="elec">Elec</label>
        <input type="text" readonly="readonly" name="elec" id="elec" />
    </div>
    <div>
        <label for="charges">Charges</label>
        <input type="text" readonly="readonly" name="charges" id="charges" />
    </div>
    <div>
        <label for="amount">Amount</label>
        <input type="text" readonly="readonly" name="amount" id="amount" />
    </div>
    <div>
        <label for="govt">Govt</label>
        <input type="text" readonly="readonly" name="govt" id="govt" />
    </div>
    <div>
        <label for="result">Result</label>
        <input type="text" readonly="readonly" name="result" id="result" />
    </div>
    <button type="button" id="btn-calculate">Calculate</button>
</form>

一个问题是，如果用户从单选按钮中选择a、b、c，我会显示一个文本框名称mytext，并在选择domestic单选按钮时隐藏，但每当我刷新页面时，它总是被选中，并且文本框出现，我如何删除它。我在这里创建了js-fiddle链接http://jsfiddle.net/MUGzE/，请回答我的两个问题，我将非常感谢。