javascript - 如何使用 jQuery/JavaScript 检测多组单选按钮更改并更改单独的表单输入？

Question

情况是我有九个唯一值用于 PayPal“添加到购物车”，我试图将它们放入单个 HTML 输入标签，由两组选项的组合决定单选按钮(每组三个单选按钮)。

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 语句永远不会计算为 true，因此其中的代码永远不会运行。这是因为您正在比较两个文字字符串，而 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>

希望对您有所帮助。