jQuery/JavaScriptを使用して複数のラジオボタンの変更を検出し、別のフォーム入力を変更するにはどうすればよいですか？

Question

状況radio buttons（各セットに3つのラジオボタン）の2つのセットからの選択の組み合わせによって決定される、単一のHTML input tagに配置しようとしているPayPalの「カートに追加」の9つのユニークな値があります。

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は有効な文ではありません。エラーが表示されない唯一の理由は、 "onChange"関数内の最初のレベルのif文が真に評価されないため、その内部のコードが決して実行されないためです。これは、2つのリテラル文字列を比較し、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関数は次のようにする必要があります。.. 。私はまた、あなたが一重または二重のあなたそのドンのようなヴァルスを探している、これはあなたが