-1

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

HTML 代码：

<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 () {

    });
});
4

6 回答 6

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>

你的跨度语法是错误的

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

江青

$('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

（未测试）

于 2013-05-02T12:53:25.690 回答
0

只需一点点 HTML 编辑，您就可以像这样得到它。请注意，我添加了data-属性以指向选择负责的输入

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);
    });
});

小提琴http://jsfiddle.net/UxTWt/

于 2013-05-02T13:00:43.443 回答
0

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()]);
});
于 2013-05-02T13:08:40.900 回答
0

您的跨度存在标记问题 - 关闭标签，然后添加关闭标签。/></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())
    });
});
于 2013-05-02T13:08:44.000 回答
0

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

$('#expireOnValue').innetText = $('radio:checked')[0].innerText;
于 2013-05-02T12:54:59.580 回答
0

你可以这样做

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());

            }

        });
于 2013-05-02T13:04:12.230 回答