-1

ユーザーが国内を選択した場合、すべてのテキストボックスに渡される値は2nになります3。異なるラジオボタンの選択についても同様です。この値の受け渡しは、ユーザーがテキストボックス名text1に値を入力した場合、ユーザーが入力した値とユーザーが選択したラジオボタンの値が乗算され、下のテキストボックスに表示されることを意味します。ユーザーが別のラジオ ボタンを選択すると、そのラジオ ボタンの値とテキスト ボックスに入力した値が乗算されます。

私のコード:

    <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>

1 つの問題は、ユーザーがラジオ ボタンから,を選択した場合に1 つのテキスト ボックス名mytext を表示し、ラジオ ボタンを選択すると非表示になることですが、ページを更新するたびにページが常に選択され、テキスト ボックスが表示され、これを削除するにはどうすればよいでしょうか。私は js を作成しました - ここにリンクがあります。私の両方の質問に親切に答えていただければ幸いです。abcdomestichttp://jsfiddle.net/MUGzE/

4

3 に答える 3

0

申し訳ありませんが、この回答を投稿するのが遅れています。動作するように、コードにいくつかの変更を加えました。

  1. チェックされているラジオボタンの値を取得する必要があるため、ラジオボタンのチェックされた属性を削除しました
  2. チェックされたラジオボタンの値を取得するようにトグルメソッドを変更しました
  3. ラジオボタンの値を掛けてテキストボックスの値を入れます

ここで働くフィドル。

ラジオ ボタンの値を toggle() に渡すことで取得でき、toggle() は次のようになります。

function toggle(checkbox)
{
    //you can get the redio button value here itself
    checkboxValue = checkbox.value;
    var name = checkbox.nextSibling.data;
if(name != 'domestic')
 document.getElementById('mytext').style.visibility='visible';
else
 document.getElementById('mytext').style.visibility='hidden';
}

次に、出力を次のように計算できます

 document.getElementById("value_output").value = 2.60 * input_value *checkboxValue;
于 2013-07-17T06:58:55.877 に答える