动态更改输入字段和/或单选按钮的 var 值答案

【问题标题】：Dynamically change a var of value of an input field and / or radio buttons动态更改输入字段和/或单选按钮的 var 值
【发布时间】：2014-09-03 22:18:03
【问题描述】：

快速提问，我自己似乎无法弄清楚。

我有一个表单，其中包含一些组合在一起的单选按钮（从列表中选择金额）和一个输入字段（指定您的金额）。

当用户选择其中一个单选按钮或输入字段时，我想要一个 var。

我的单选按钮工作得很好，但是输入不会在按键时改变。但是为什么呢？

另外，我认为这可以更智能地编码，有什么建议吗？谢谢！

<form method="post" class="formDoneer" name="formDoneer">

  <fieldset id="doneerField">
<legend>Ik doneer</legend>
<div class="radioBedrag">
      <input id="5" name="bedrag" value="5" type="radio" required>
      <label for="5">5</label>

      <input id="10" name="bedrag" value="10" type="radio" required>
      <label for="10">10</label>

      <input id="25" name="bedrag" value="25" type="radio" required>
      <label for="25">25</label>

      <input id="50" name="bedrag" value="50" type="radio" required>
      <label for="50">50</label>

      <input id="100" name="bedrag" value="100" type="radio" required>
      <label for="100">100</label>

      <input id="250" name="bedrag" value="250" type="radio" required>
      <label for="250">250</label>

      <label for="anders">Anders
    <input id="anders" name="bedragAnders" type="text" placeholder="anders" >
  </label>


    </div>
<div class="radioFrequentie">
      <input id="maand" name="frequentie" value="maand" type="radio" required>
      <label for="maand">Per maand</label>
      <input id="kwartaal" name="frequentie" value="kwartaal" type="radio" required>
      <label for="kwartaal">Per kwartaal</label>
      <input id="jaar" name="frequentie" value="jaar" type="radio" required>
      <label for="jaar">Per jaar</label>
      <input id="eenmalig" name="frequentie" value="eenmalig" type="radio" required>
      <label for="eenmalig">Eenmalig</label>
    </div>

  <fieldset>
<div>
      <input type="submit" name="submit" value="Bevestigen" class="cta" id="submitForm">
    </div>

到目前为止，这是我的 jQuery：

$('.radioBedrag input, .radioFrequentie input').click(function() {

      valueBedrag = $('.radioBedrag input:checked').val();
      valueFrequentie = $('.radioFrequentie input:checked').val();

      if($('input[name=bedragAnders]').is(':focus')) {
          valueBedrag = $('input[name=bedragAnders]').val();

     } 

     $('input[name=bedragAnders]').keyup(function(){
          valueBedrag = $('input[name=bedragAnders]').val(); 
     });

    $('label[for=accept]').text("Ik geef toestemming om per " + valueFrequentie + " €" + valueBedrag + " van mijn rekening af te schrijven.");  


});

【问题讨论】：

标签： jquery forms input

【解决方案1】：

对于单选按钮，您可以使用 click() 事件，但对于文本字段，您需要另一个事件，例如 keyup()：

$('input[type=radio]').click(checkValues);
$('input[type=text]').keyup(checkValues);

function checkValues () {

    valueBedrag = $('.radioBedrag input:checked').val();
    valueFrequentie = $('.radioFrequentie input:checked').val();

    if ($('input[name=bedragAnders]').val() != '') {
        valueBedrag = $('input[name=bedragAnders]').val();
    }

    $('label[for=accept]').text("Ik geef toestemming om per " + valueFrequentie + " €" + valueBedrag + " van mijn rekening af te schrijven.");

}

DEMO

但您需要添加额外的逻辑。例如，您应该能够在“Anders”处输入值或单击单选按钮，而不是两者。我制作了一个 basic example 包含这样的逻辑

【讨论】：