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

Question

我有一些单选按钮:

<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]);
    }
}

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

Answer 1

您可以通过首先在 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

basically means:

get all input elements that have a type attribute of "radio", and a name attribute of "size" that are :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>