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

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

4

3 回答 3

0

你应该可以使用

<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>
于 2013-07-17T05:37:12.310 回答
0

我只是想和你分享这个。我为您的标记制作了一个更简洁的版本，并使用 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);
        });
    });
});

完整的演示在这里

于 2013-07-17T06:05:24.693 回答
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 回答