在單選按鈕選擇上顯示表，然后將單選按鈕值傳遞到表中的字段，選項添加更多，然后附加到現有表

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'單擊單選按鈕之前，應隱藏選擇表

這是一個小提琴

快樂的編碼！