Question

我有3个单选按钮[1Day，1Week，1Month]，最初将选择1天。我在隐藏字段中都需要starton和expireon值。根据用户选择，我必须将starton和expireon值更新为span标签。这里所有3个选择的starton值相同，只有expireon值会根据单选按钮选择而改变。任何人都可以帮我完成这个。

HTML code：

<body>
    <input type="hidden" id="startOn" value="01/01/2013" />
    <input type="hidden" id="expireDay" value="01/01/2013" />
    <input type="hidden" id="expireWeek" value="01/07/2013">
    <input type="hidden" id="expireMonth" value="01/31/2012" />
    <input type="radio" id="packageAmt1" name="packageAmt" checked="checked">1 Day</input>
    <input type="radio" id="packageAmt2" name="packageAmt">1 Week</input>
    <input type="radio" id="packageAmt3" name="packageAmt">1 Month</input>
    <br/>Start on<span id="startOnValue" /></span>
    <br/>Expire on<span id="expireOnValue" /></span>
</body>

jQuery Code:

$(document).ready(function () {
    var starton = $('#startOn').val()
    var expireday = $('#expireDay').val()
    var expireweek = $('#expireWeek').val()
    var expiremonth = $('#expireMonth').val()
    $('#startOnValue').text(starton);
    $('#expireOnValue').text(expireday);
    $('input[type=radio]').change(function () {

    });
});

Answer 1

好的，似乎你想从隐藏字段中获取值并根据所选的无线电将其放入跨度。

所有输入标记语法的拳头都是错误的。并为此添加一个值。

<label><input type="radio" name="packageAmt" value="expireDay" checked="checked"/>1 Day</label>
<label><input type="radio" name="packageAmt" value="expireWeek"/>1 Week</label>
<label><input type="radio" name="packageAmt" value="expireMonth"/>1 Month</label>

并且您的span语法错误

<br/>Start on <span id="startOnValue"></span>
<br/>Expire on <span id="expireOnValue"></span>

JQ

$('input[name="packageAmt"]').change(function(){

     // you could do in one line
     // $('#expireOnValue').text($('#' + $(this).val()).val());
     // but for easier reading...

     // get the value of the input whose ID is the VALUE of this radio
     var selector='#' + $(this).val();
     var text=$(selector).val();

     // put it in the span
     $('#expireOnValue').text(text);

}).first().trigger('change'); // trigger on page load to catch the default

（未经测试）

Answer 2

你已经完成了99％的工作。在空函数体内，使用：

$('#expireOnValue').innetText = $('radio:checked')[0].innerText;

Answer 3

通过一点点的HTML eiditing，你就可以得到它。请注意，我添加了data-属性以指向select负责的输入

<强> HTML

<input type="hidden" id="startOn" value="01/01/2013" />
<input type="hidden" id="expireDay" value="01/01/2013" />
<input type="hidden" id="expireWeek" value="01/07/2013">
<input type="hidden" id="expireMonth" value="01/31/2013" />
<input type="radio" id="packageAmt1" data-expire='expireDay' name="packageAmt" checked="checked">1 Day</input>
<input type="radio" id="packageAmt2" data-expire='expireWeek'name="packageAmt">1 Week</input>
<input type="radio" id="packageAmt3" data-expire='expireMonth' name="packageAmt">1 Month</input>
<br/>Start on <span id="startOnValue"></span>

<br/>Expire on <span id="expireOnValue"></span>

<强>的JavaScript

$(document).ready(function () {
    var starton = $('#startOn').val()
    var expireday = $('#expireDay').val()
    var expireweek = $('#expireWeek').val()
    var expiremonth = $('#expireMonth').val()
    $('#startOnValue').text(starton);
    $('#expireOnValue').text(expireday);

    $('input[type=radio]').change(function () {
        var iid = $(this).data('expire');
        var date = $('#'+iid).val();
        $('#expireOnValue').text(date);
    });
});

FIDDLE http://jsfiddle.net/UxTWt/

Answer 4

你可以这样做

http://jsfiddle.net/sHHDF/

HTML

<input type="hidden" id="startOn" value="01/01/2013"/>
        <input type="hidden" id="expireDay" value="01/01/2013"/> 
        <input type="hidden" id="expireWeek" value="01/07/2013">
        <input type="hidden" id="expireMonth" value="01/31/2012"/>

        <input type="radio" id="packageAmt1" value="1"  name="packageAmt" checked="checked">1 Day</input>
        <input type="radio" id="packageAmt2" value="2" name="packageAmt">1 Week</input>
        <input type="radio" id="packageAmt3" value="3" name="packageAmt">1 Month</input><br/>

        Start on<span id="startOnValue" /></span><br/>
        Expire on<span id="expireOnValue" /></span>

的jQuery

 var starton = $('#startOn').val()
            var expireday = $('#expireDay').val()
            var expireweek = $('#expireWeek').val()
            var expiremonth = $('#expireMonth').val()
            $('#startOnValue').text(starton);
            $('#expireOnValue').text(expireday);

        $('input[type=radio]').change(function()
        {
            var value_radio = $(this).val();

            if(value_radio == 1){

                $('#expireOnValue').html($('#expireDay').val());

            }
            if(value_radio == 2){

                $('#expireOnValue').html($('#expireWeek').val());

            }
            if(value_radio == 3){

                $('#expireOnValue').html($('#expireMonth').val());

            }

        });

Answer 5

JSFiddle

HTML：

<input type="hidden" id="startOn" value="01/01/2013"/>
<input type="hidden" id="expireDay" value="01/01/2013"/> 
<input type="hidden" id="expireWeek" value="01/07/2013">
<input type="hidden" id="expireMonth" value="01/31/2012"/>
<label for="packageAmt2">1 Day</label>
<input type="radio" id="packageAmt1" name="packageAmt" checked="checked" value="expireday" />
<label for="packageAmt2">1 Week</label>
<input type="radio" id="packageAmt2" name="packageAmt" value="expireweek" />
<label for="packageAmt2">1 Month</label>
<input type="radio" id="packageAmt3" name="packageAmt" value="expiremonth" />
<br/>
Start on <span id="startOnValue"></span><br/>
Expire on <span id="expireOnValue"></span>

JS：

var values = {
    starton: $('#startOn').val(),
    expireday: $('#expireDay').val(),
    expireweek: $('#expireWeek').val(),
    expiremonth: $('#expireMonth').val()
};
$('#startOnValue').text(values['starton']);
$('#expireOnValue').text(values['expireday']);
$('input[type=radio]').change(function() {
    $('#startOnValue').text(values['starton']);
    $('#expireOnValue').text(values[$(this).val()]);
});

Answer 6

您的跨度上存在标记问题 - 关闭标记，然后添加结束标记。 /></span>

$(document).ready(function () {
    $('#startOnValue').text($('#startOn').val());
    $('#expireOnValue').text($('#expireDay').val());
    $('input[type=radio]').change(function () {
        var i = $('input[type=radio]').index(this) + 1;
        $('#expireOnValue').text($('input[type=hidden]').eq(i).val())
    });
});

单选按钮条件设置值

6 个答案: