Question

我正在使用不同的单选按钮如何在选择单选按钮时传递不同的值，如果用户选择国内，则传递给所有文本框的值将为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>

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

Answer 1

您应该可以使用

<input type="radio" name="myCheckbox" value="Hello World"
    onClick="document.getElementById('myTextId').value = this.value;">
</input>
<input type="radio" name="myCheckbox" value="Goodbye World"
    onClick="document.getElementById('myTextId').value = this.value;">
</input>

<input type="text" id="myTextId" name="myText" value=""></input>

编辑：或者没有内联JS

<script>
    window.onload = function() {
        var radios = document.getElementsByClassName('myRadioClass');
        for(var i = 0; i < radios.length; i++) {
            radios[i].onclick = function() {
                document.getElementById('myTextId').value = this.value;
            }
        }
    }
</script>

<input type="radio" name="myCheckbox" class="myRadioClass" value="Hello World"></input>
<input type="text" id="myTextId" name="myText" value=""></input>

另一个编辑：希望这是你想要的。 onClick事件现在都从单选按钮值传输文本，并显示辅助div。

<script>
    window.onload = function() {
        var radios = document.getElementsByClassName('myRadioClass');
        for(var i = 0; i < radios.length; i++) {
            radios[i].onclick = function() {
                document.getElementById('myTextId').value = this.value;
                document.getElementById('hiddenBox').style.display = 'block';
            }
        }
    }
</script>

<input type="radio" name="myCheckbox" class="myRadioClass" value="Hello World"></input>
<input type="text" id="myTextId" name="myText" value=""></input>

<div id="hiddenBox" style="display:none;">Poof!</div>

Answer 2

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

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

Answer 3

对不起，我知道发布这个答案已经很晚了。对代码进行了一些更改以使其正常工作。

删除了单选按钮的已检查属性，因为我们需要获取检查的单选按钮值
更改了您的切换方法以获取已选中的单选按钮值
乘以单选按钮值以放置文本框值

工作小提琴here。

你可以通过将单选按钮值传递给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;

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

3 个答案: