在单选按钮选择上显示表，然后将单选按钮值传递到表中的字段，选项添加更多，然后附加到现有表

Question

第一次发布海报......请不要打扰我。 我甚至不确定这一切是如何运作的，但是这里有。 我基本上试图重新创建位于此处的表单：http： //yeticustomshop.com/get-quote我有产品选择显示，表格现在显示。

需要的用户体验：

1. 选择产品，产品选择将替换为显示产品选择名称，复选框和数量选择器的表格。
2. 选择添加其他产品。 如果单击，显示产品选择，则重复该过程，向表中添加新选择。
3. 删除以前选定的项目的功能。

任何接受者？

这是一个小提琴

    // Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
    // add an event listener to do stuff when one of them is clicked
    products[i].addEventListener("click", function() {
        // get the value of the clicked button
        var cup = this.value;
        // put the value in the input box
        document.getElementById('yourSelection').value = cup;
        // hide the radio buttons and show the table
        document.getElementById("cupDesc").style.display = "block";
        document.getElementById("cupSelect").style.display = "none";
    });
}

感谢用户“ 我曾经摔过一只熊 ”的帮助！

Answer 1

干得好。 请注意解释的注释。

// Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
    // add an event listener to do stuff when one of them is clicked
    products[i].addEventListener("click", function() {
        // get the value of the clicked button
        var cup = this.value;
        // put the value in the input box
        document.getElementById('yourSelection').value = cup;
        // hide the radio buttons and show the table
        document.getElementById("cupDesc").style.display = "block";
        document.getElementById("cupSelect").style.display = "none";
    });
}

请注意，在使用style='display:none'单击单选按钮之前，应隐藏选择表

这是一个小提琴

快乐的编码！