2014-09-03 53 views
0

快速问题,似乎无法弄清楚自己。动态更改输入字段和/或单选按钮的var值

我有一些单选按钮组合在一起(从列表中选择金额)和输入字段(指定您的金额)的形式。

当用户选择其中一个单选按钮或输入字段时,我想要一个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."); 


}); 

回答

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包含这样的逻辑