如何使用jQuery/JavaScript檢測多組單選按鈕更改並更改單獨的表單輸入？

Question

情況是，我有9個PayPal「添加到購物車」的獨特值，我試圖將其放置在由兩組radio buttons（每組中的三個單選按鈕）的組合決定的單個HTML input tag中。

HTML可能會略有不同，它看起來如何現在的唯一原因是因爲我一直在修改各種腳本試圖找到一個工作方法。腳本可能會簡單得多，但我只是想了解如何使其工作（無論哪個單選按鈕被更改或多少次）。

<form id="prod_size"> 
<input type="radio" name="size" value="1">small</input> 
<input type="radio" name="size" value="4" checked="checked">medium</input> 
<input type="radio" name="size" value="16">large</input> 
</form> 
<form id="prod_bundle"> 
<input type="radio" name="prod_bundle" value="single">single</input> 
<input type="radio" name="prod_bundle" value="double">double</input> 
<input type="radio" name="prod_bundle" value="triple" checked="checked">triple</input> 
</form> 
<form> 
<input id="cart_button_value" value="green"> 
</form> 

我在瀏覽器控制檯中看不到任何錯誤。下面的所有內容都是從stackoverflow/stackexchange上的多個代碼示例中獲得的，因爲我不幸自己找不到工作解決方案。

$("#prod_size , #prod_bundle").on('change', function() { 
if ('#prod_size' == '1'){ 
    if ("#prod_bundle".value == 'single'){ 
     $("#cart_button_value").val = 'red'; 
    } 
    else if ("#prod_bundle".value == 'double'){ 
     $("#cart_button_value").val = 'green'; 
    } 
    else if ("#prod_bundle".value == 'triple'){ 
     $("#cart_button_value").val = 'blue'; 
    } 
} 
else if ('#prod_size' == '4'){ 
    if ("#prod_bundle".value == 'single'){ 
     $("#cart_button_value").val = 'black'; 
    } 
    else if ("#prod_bundle".value == 'double'){ 
     $("#cart_button_value").val = 'white'; 
    } 
    else if ("#prod_bundle".value == 'triple'){ 
     $("#cart_button_value").val = 'gray'; 
    } 
} 
else if ('#prod_size' == '16'){ 
    if ("#prod_bundle".value == 'single'){ 
     $("#cart_button_value").val = 'orange'; 
    } 
    else if ("#prod_bundle".value == 'double'){ 
     $("#cart_button_value").val = 'purple'; 
    } 
    else if ("#prod_bundle".value == 'triple'){ 
     $("#cart_button_value").val = 'pink'; 
    } 
} 
}).trigger('change'); 

Answer 1

你的想法在某種程度上是正確的道路，但是在你的代碼中有很多錯誤。例如，"#prod_bundle".value不是有效的聲明。你沒有看到錯誤的唯一原因是你的第一級if語句在「onChange」函數中永遠不會評估爲真，因此它們內部的代碼永遠不會運行。這是因爲你正在比較兩個字符串，並且string:'#prod_size' == string:'1'永遠不可能相等。

無論如何，這裏有一個方法去做：

// comments are in reference to the code OP posted 
 

 
// there is no need to fetch dom elements every time you need them 
 
// store them in variables when the need to use them arises 
 
var $prodSize = $('#prod_size') 
 
var $prodBundle = $('#prod_bundle') 
 
var $cartButton = $("#cart_button_value") 
 

 
// creating a separate function to handle the change 
 
// is not strictly necessary, but it makes things a bit cleaner 
 
function handleOnChange() { 
 

 
    // find the selected size option and get its value 
 
    // size will contain "1", "4", or "16" 
 
    var size = $prodSize.children(':checked').val() 
 
    // find the selected bundle option and get its value 
 
    // bundle will contain "single", "double", or "triple" 
 
    var bundle = $prodBundle.children(':checked').val() 
 
    // create a value variable to grab the desired color 
 
    // to insert into the "cart button" input. 
 
    var value = '' 
 
    
 
    // make comparisons, similar to what you were doing 
 
    // except now we are using variables 
 
    if (size == 1){ 
 
    
 
    if (bundle === 'single') value = 'red'; 
 
    else if (bundle === 'double') value = 'green'; 
 
    else if (bundle === 'triple') value = 'blue'; 
 
    
 
    } else if (size == 4){ 
 
    
 
    if (bundle === 'single') value = 'black'; 
 
    else if (bundle === 'double') value = 'white'; 
 
    else if (bundle === 'triple') value = 'gray'; 
 
    
 
    } else if (size == 16){ 
 
    if (bundle === 'single') value = 'orange'; 
 
    else if (bundle === 'double') value = 'purple'; 
 
    else if (bundle === 'triple') value = 'pink'; 
 
    } 
 
    
 
    // update the cart button input with whatever color was picked 
 
    $cartButton.val(value) 
 
} 
 

 
// attach the on change events 
 
$prodBundle.on('change', handleOnChange) 
 
$prodSize.on('change', handleOnChange) 
 

 
// trigger it for the first time 
 
$prodSize.trigger('change')

<form id="prod_size"> 
 
<input type="radio" name="size" value="1">small</input> 
 
<input type="radio" name="size" value="4" checked="checked">medium</input> 
 
<input type="radio" name="size" value="16">large</input> 
 
</form> 
 
<form id="prod_bundle"> 
 
<input type="radio" name="prod_bundle" value="single">one</input> 
 
<input type="radio" name="prod_bundle" value="double">two</input> 
 
<input type="radio" name="prod_bundle" value="triple" checked="checked">three</input> 
 
</form> 
 
<form> 
 
<input id="cart_button_value" value="green"> 
 
</form> 
 
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>

我希望幫助。

Answer 2

我得到了另一個問題： 使用數據屬性來設置要顯示的輸入值，然後要求他們..

<form id="prod_size"> 
<input type="radio" name="size" value="one">small</input> 
<input type="radio" name="size" value="four" checked="checked">medium</input> 
<input type="radio" name="size" value="sixteen">large</input> 
</form> 
<form id="prod_bundle"> 
<input type="radio" name="prod_bundle" value="single" data-one="red" data-four="black" data-sixteen="orange">single</input> 
<input type="radio" name="prod_bundle" value="double" data-one="green" data-four="white" data-sixteen="purple">double</input> 
<input type="radio" name="prod_bundle" value="triple" data-one="blue" data-four="gray" data-sixteen="pink" checked="checked">triple</input> 
</form> 
<form> 
<input input id="cart_button_value" value="green"/> 
</form>  

以及JavaScript函數應該是這樣的.. 。

$(function(){ 
$('[name="size"]').change(changeInputVal); 
$('[name="prod_bundle"]').change(changeInputVal); 

function changeInputVal(){ 
    var sizeSelected = $('input[name="size"]:checked', 'form#prod_size').val(); 
    var valueToInput = $('input[name="prod_bundle"]:checked', 'form#prod_bundle').data(sizeSelected); 
    $("#cart_button_value").val(valueToInput); 
    } 
}); 

我希望這能幫助你