我有一些单选按钮:
<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]);
}
}
这将在单选按钮更改时运行该功能,但仅在选择两个时更改跨度。我不确定如何从单选按钮获取大小和颜色的值。
答案 0 :(得分:2)
您可以通过首先在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);
答案 1 :(得分: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();
});`