如何在文本框中选择不同的单选按钮时传递不同的值 [英] how to pass different values on selecting different radio button in text box

问题描述

我正在使用不同的单选按钮如何在选择单选按钮时传递不同的值，如果用户选择国内，那么传递给所有文本框的值将为 2 n如果用户选择一个单选按钮，则值传递为 3 等等，以便选择不同的单选按钮。如果用户在文本中输入任何值，则此值传递意味着框名 text1 用户输入的值和用户选择的单选按钮的值乘以然后显示在下面的文本框中。如果用户选择不同的单选按钮，则该raddio按钮值和文本框中输入的值相乘。

I'm working on different radio button how can I pass the different values on selecting radio button, like if user select domestic then the value that pass to all text box will be 2 n if user select a in radio button then value pass to be 3 and so on for different radio button selection.This value passing mean if user enter any value in text box name text1 that value which user enter and the value of the radio button that user select multiply and then display in text box below. if user select different radio button then that raddio button value and the value enter in text box got multiply.

我的代码：

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

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

one problem is that i display one text box name mytext display on if user select a ,b ,c from the radio button and hide on selecting domestic radio button but whenever i refresh my page its always selected on a and the text box appear how can i remove this . i created the js -fiddle here is the link http://jsfiddle.net/MUGzE/ kindly answer my both question i will really appreciate.

推荐答案

我只想和你分享一下。我制作了一个更清晰的标记版本，并使用jQuery使JS调用更紧凑，我也使用数据属性来设置每个输入需要乘以的值。

I just want to share this with you. I made a cleaner version of your markup and used jQuery to make JS calls more compact, also I used data-attributes to set the value that needs to be multiplied for each input.

这是Javascript：

Here's the 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);
        });
    });
});

此处完整演示

Full demo here

这篇关于如何在文本框中选择不同的单选按钮时传递不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！