单选按钮的条件来设置一个值

-1

我有3个单选按钮[1天，1周，1月]，最初1天将被选中。我在隐藏字段中都需要starton和expireon值。基于用户选择，我必须更新starton和expireon值以跨越标签。这里的starton值对于所有3个选择都是相同的，只有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() { 

    }); 
});

来源

2013-05-02 SPN

输入标签不能像那样工作。' text' – Popnoodles 2013-05-02 13:08:55

你可以不喜欢它这

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-02 13:04:12 Johnny000

但是为了更好的练习，你可以在没有if/else丛林的情况下做到这一点吗？ – Popnoodles 2013-05-02 13:06:40

你已经做到了; D – Johnny000 2013-05-02 13:11:22

我知道，但我戳你，因为它总是很好，写一些东西，然后细化它:) – Popnoodles 2013-05-02 13:14:09

好吧，看来你要采取从一个隐藏字段的值，并把它的跨度取决于选定的电台。

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

<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-02 12:53:25 Popnoodles

你所做的工作的99％了。在空函数体内部，使用：

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

来源

2013-05-02 12:54:59 Renan

有了一点HTML eiditing，你可以像这样得到它。请注意，我说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); 
    }); 
});

FIDDLE http://jsfiddle.net/UxTWt/

来源

2013-05-02 13:00:43 Spokey

我假设'expireMonth'值是一个错字问题。 – 2013-05-02 13:10:59

OP的输入写出错 – Popnoodles 2013-05-02 13:12:19

我用OP的代码并没有看到。 – Spokey 2013-05-02 13:20:41

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-02 13:08:40

快速FYI，如果你只是用输入标签 – 2013-05-02 13:15:01

包装输入，不需要'for'谢谢！相关提示 – 2013-05-02 13:22:06

你有你的跨度标记问题 - 关闭标签，然后添加一个结束标记。 /></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-02 13:08:44

注意：如果您添加更多隐藏值，则需要对它们进行分组。可能与类最好，然后选择，否则索引会改变。 – 2013-05-02 13:10:04

单选按钮的条件来设置一个值

回答

相关问题