javascript - 单击两个单选按钮后执行JS功能？

我有一些单选按钮：

<span id="price"></span>

<div class="optionTitle">Size</div>
<label class="productButton">
    <input type="radio" value="50" class="size" name="size"/>
    <b>50</b>
</label>
<br/>
<label class="productButton">
    <input type="radio" value="100" class="size" name="size"/>
    <b>100</b>
</label>
<br/>
<div class="optionTitle">Color</div>
<label class="productButton">
    <input type="radio" value="red" class="color" name="color"/>
    <b>Red</b>
</label>
<label class="productButton">
    <input type="radio" value="blue" class="color" name="color"/>
    <b>Blue</b>
</label>

我想根据选中的两个单选按钮将price跨度更改为四个值之一。请注意，组合存储在<script>标记中：

var prices = {
    '50,red':'5',
    '50,blue':'10',
    '100,red':'150',
    '100,blue':'50'
};

如何在Javascript / JQuery中完成？我已经启动了一个函数，可以将其放置在四个单选按钮的onchange=""中：

function getPrice() {
    var $size = 0; // placeholder
    var $color = 0; // placeholder
    var $e = "" + $size + "," + $color;
    if ($size != 0 && $color != 0) {
        $("#price").text(prices[$e]);
    }
}

这将在单选按钮更改时运行该功能，但仅在选择两个时更改跨度。我不确定如何从单选按钮获取大小和颜色的值。

最佳答案

您可以通过首先在getPrice()方法中选择当前选中的“大小”和“颜色”单选按钮来实现此目的：

var size = $('input[type="radio"][name="size"]:checked').val();
var color = $('input[type="radio"][name="color"]:checked').val();

然后，您可以使用每个输入元素中的两个值来创建查找键，以访问prices表中的价格并显示它：

var key = size + "," + color;
$("#price").text(prices[key]);

上面显示的选择语法可以通过以下方式考虑：


  input[type="radio"][name="size"]:checked
  
  基本上意味着：
  
  获取具有input属性的所有type元素
  "radio"和name的"size"属性是:checked


这是完整的代码段-希望对您有所帮助！

var prices = {
    '50,red':'5',
    '50,blue':'10',
    '100,red':'150',
    '100,blue':'50'
};

function getPrice() {

    var size = $('input[type="radio"][name="size"]:checked').val();
    var color = $('input[type="radio"][name="color"]:checked').val();
    var key = size + "," + color;

    $("#price").text(prices[key]);
}

$('input[type="radio"]').click(getPrice);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="price"></span>
<div class="optionTitle">Size</div>
<label class="productButton">
    <input type="radio" value="50" class="size" name="size"/>
    <b>50</b>
</label> <br/>
<label class="productButton">
    <input type="radio" value="100" class="size" name="size"/>
    <b>100</b>
</label> <br/>

<div class="optionTitle">Color</div>
<label class="productButton">
    <input type="radio" value="red" class="color" name="color"/>
    <b>Red</b>
</label>
<label class="productButton">
    <input type="radio" value="blue" class="color" name="color"/>
    <b>Blue</b>
</label>

关于javascript - 单击两个单选按钮后执行JS功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53753965/