Question

<input type="checkbox" id="star1" />
<input type="checkbox" id="star2" />
<input type="checkbox" id="star3" />
<input type="checkbox" id="star4" />
<input type="checkbox" id="star5" />
<input type="button" value="Build" onclick="build()" />

function build(){
var balance = 300;
for (var i =1; i < 6; i++) {

    if(document.getElementById("star"+i).checked) {
        balance = balance - 100;
    }
}
$("#bal").text("Balance: $" + balance);
}

在我的示例代码中，玩家的余额为300美元，这意味着他只能负担建造1star，2star，3star酒店的费用。每家酒店的建造费用为100美元。因此，当他检查第4个复选框时，错误信息应显示为“你买不起它。”

Answer 1

我建议使用单选按钮，并选择“无选择”。此外，您可以在单选按钮上添加value属性，如下所示：

<input type="radio" name="hotel" checked="checked" /> No selection
<input type="radio" name="hotel" id="star1" value="100" /> 1 star
<input type="radio" name="hotel" id="star2" value="200" /> 2 star

然后，您可以根据所选单选按钮的值检查余额，以查看用户是否可以负担得起。

这是jQuery代码的样子：

var $selectedHotel = $('input:radio[name=hotel][value]:checked');
if ($selectedHotel.length > 0) {
    var cost = parseInt($selectedHotel.val(), 10);
    if (cost > balance) {
        alert("Sorry mate, you can't afford that!");
    } else {
        alert("You built it, mate!");
    }
} else {
    alert('You must select something first.');
}

jsfiddle

以下选择器获取name属性的“hotel”的所有单选按钮，并且具有value属性（不包括“无选择”按钮）并进行检查，应该是最多一个按钮。

'input:radio[name=hotel][value]:checked'：

Answer 2

for (var i =1; i <= 5; i++) {
    if(document.getElementById("star"+i).checked) {
        if(balance > 100)
            balance -= 100;
        else
            alert("You can't afford it mate.");
    }
}

这是您实际代码的修复程序，但它与您描述的功能不同。然而，该功能将无法与您设计的用户界面一起使用（您可以在没有前3个的情况下查看第4个框），因此您需要先解决更多问题。

如果有足够的余额，请启用复选框

2 个答案: