javascript - 如何创建带有菜肴选项的餐厅订单菜单？

Question

我目前正在开发一个餐厅菜单订购网站，我一直在为某些菜肴添加菜肴选项。我使用单选按钮让用户选择他们喜欢的选项：

<label class="option"><input type="radio" value="Ketchup"> Ketchup</label>ETC ...

然后，我有一个添加按钮，它是一个带有 onclick 属性的链接，然后运行一个函数。如何在没有表单的情况下通过函数传递选中的单选框值？

Answer 1

当您单击添加按钮时，它不知道选择了哪个单选按钮，因此您不能真正“通过选中的单选框值”。你可以做的只是检查函数内部的值，如果你给你的收音机一个让你引用它们的类。使用一类说“菜”，其jQuery代码将是：

$('.dish:checked').val(); 

Answer 2

如果您给表单元素 ID，如下所示：

<label class="option"><input type="radio" id="radioButton1" value="Ketchup"> Ketchup</label>

然后，您可以通过 DOM 轻松访问单选按钮的值。我不会使用参数，而是使用局部变量，如下所示：

function myFunction {
    var myValue;
    if (document.getElementById('radioButton1').checked == true) {
        myValue = document.getElementById('radioButton1').value;
    }
    else {
        // Check other radio buttons
    }
    // Perform some function using myValue
}

Answer 3

为输入“单选按钮”提供一个 id，每个按钮上都有一个 onClick 事件，当单击该按钮时，将运行该事件所附加到的函数。