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>

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

如何在Javascript/JQuery中实现这一点？我已经启动了一个函数，可以为四个单选按钮中的每一个设置onchange=：

<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>

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 key = size + "," + color;
$("#price").text(prices[key]);

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

输入[类型=无线电][名称=大小]：已选中

基本上是指：

获取类型属性为的所有输入元素 收音机和大小为的名称属性：选中

这里有一个完整的代码片段-希望对您有所帮助

风险价值价格={ “50，红色”：“5”， “50，蓝色”：“10”， “100，红色”：“150”， “100，蓝色”：“50” }; 函数getPrice{ var size=$输入[type=radio][name=size]：已选中.val； var color=$输入[type=radio][name=color]：已选中.val； 变量键=大小+，+颜色； $price.textprices[key]； } $'input[type=radio]'。单击获取价格； 大小 50 100 颜色 红色 蓝色

---

使用$input.ATRCHECKED无效

使用$input[0]。选中应该可以工作

function getSize(){
    if($("input[type=radio][value='red']")[0].checked){
        return "red";
    }
    else if($("input[type=radio][value='blue']")[0].checked){
        return "blue";
    }
    else{
        return "";
    }
}

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

$('input[type=radio]').change(function() {
    getPrice();
});`