Question

快速提问，似乎无法自己解决这个问题。

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

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

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

此外，我认为这可以编码得更聪明，任何建议？谢谢！

<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.");  


});

Answer 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＆＃39;的值。或单击单选按钮，而不是两者。我已经制作了包含此类逻辑的basic example

动态更改输入字段和/或单选按钮的值变量

1 个答案: