-1

我正在使用 jQuery，我需要在不同的单选按钮点击上传递相同文本框的不同值，例如文本框名称actual在选择不同的单选按钮时有四个不同的值我该如何传递？

    <script type="text/javascript" src="jquery.min2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
    if($('input[name="myradio"]:checked').val() == '100')
        $('#loads').closest('div').hide();
    else
        $('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
            $(this).val('0'); 
});

$('#actual').val('2.56');
 $("input:radio[name=myradio], #btn-calculate").click(function() {
     if ($('input[name=myradio]:radio:checked').val() == '100'){
       $('#actual').val('2.56');
       $('#charges').val('20');
     } else if ($('input[name=myradio]:radio:checked').val() == '200'){
       $('#actual').val('3.50');
       $('#charges').val('40');
     } else if ($('input[name=myradio]:radio:checked').val() == '300'){
       $('#actual').val('4.50');
       $('#charges').val('60');
     } else if ($('input[name=myradio]:radio:checked').val() == '400'){
       $('#actual').val('5.50');
       $('#charges').val('80');
     }
    $('#tax').val(($('#units').val())*($('#actual').val()));
    $('#elec').val(($('#units').val())*($('#actual').val()));
     $('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
      $('#govt').val(($('#actual').val())-($('#units').val()));
         $('#result').val(($('#amount').val())-($('#govt').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>

同样，我希望在文本框名称amount=charges+actual和文本框名称以及以上四个单选按钮govt=actual-units的文本框名称中使用它result=amount-govt

jsFiddle的代码。

4

2 回答 2

0

只需为每个单选按钮使用点击事件；

<input type="radio" value="200" name="myradio" id="radio_A"/>a

$('#radio_A').on('click', function() { $('#actual').val(somevalue); });

http://jsfiddle.net/c9sHt/32/

于 2013-07-17T08:21:09.007 回答
0 
<!DOCTYPE html>
<head>

<style type="text/css">
div {
    margin: 10px 0;
}
div label {
    width: 140px;
    display: inline-block;
    text-align: right;
}
input[readonly] {
    background: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#loads').closest('div').hide();
    $('#units').val('0');
    $('input[name="myradio"]').change(function(){
            if($('input[name="myradio"]:checked').val() == '100')
                $('#loads').closest('div').hide();
            else
                $('#loads').closest('div').show();
    });

    $('input[readonly]').each(function(){
                    $(this).val('0'); 
        });

        $('#actual').val('2.56');
        $("input:radio[name=myradio], #btn-calculate").click(function() {
            if ($('input[name=myradio]:radio:checked').val() == '100'){
               $('#actual').val('2.56');
               $('#charges').val('20');
            } else if ($('input[name=myradio]:radio:checked').val() == '200'){
               $('#actual').val('3.50');
               $('#charges').val('40');
            } else if ($('input[name=myradio]:radio:checked').val() == '300'){
               $('#actual').val('4.50');
               $('#charges').val('60');
            } else if ($('input[name=myradio]:radio:checked').val() == '400'){
               $('#actual').val('5.50');
               $('#charges').val('80');
            }
            $('#tax').val(($('#units').val())*($('#actual').val()));
            $('#elec').val(($('#units').val())*($('#actual').val()));
            $('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
            $('#govt').val(($('#actual').val())-($('#units').val()));
            $('#result').val(($('#amount').val())-($('#govt').val()));
        });
});
</script>
</head>
<body>
<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" data-value="0.00" readonly="readonly" name="tax" id="tax" />
    </div>
    <div>
        <label for="charges">Charges</label>
        <input type="text" data-value="20.00" readonly="readonly" name="charges" id="charges" />
    </div>
    <div>
        <label for="amount">Amount</label>
        <input type="text" data-value="2.60" readonly="readonly" name="amount" id="amount" />
    </div>
    <div>
        <label for="govt">Govt</label>
        <input type="text" data-value="2.60" 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>

</body>

</html>
于 2013-07-17T10:08:44.567 回答