動態更改輸入字段和/或單選按鈕的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."); 


});

來源

2014-09-03 WIWIWWIISpitFire

對於您可以使用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包含這樣的邏輯

來源

2014-09-03 14:03:24

動態更改輸入字段和/或單選按鈕的var值

回答

相關問題