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

基本上是指：

获取具有input属性的所有type元素   "radio"和name的{{1}}属性"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);

Answer 2

使用$ input.attr（“ checked”）无效。

使用$ input [0] .checked应该可以工作

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();
});`

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

2 个答案: