如何使用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); 
    } 
}); 

我希望这能帮助你