如何从“复选框”到“表”获取值？

Question

你好，我被困在了这个阶段，而且我对JavaScript没有足够的经验，在下面的HTML中，有一个选择框，包括手机的2项选项(phone1 & phone2)，以及名为“添加”的表和按钮

下面的JavaScript代码有一个名为addrow()的函数，此时我需要按下“Add”按钮，从选择框中获得我选择的选项。

例如，如果我选择phone1，这意味着它应该在表中显示phone1 +价格。在那之后，如果我改变主意，决定选择phone2，那就意味着要隐藏phone1+price，向phone2+price展示

还有“服务费”(两部手机10美元)，这应该在phone1和phone2下显示

例如，如果选择phone1，则表中的平均值显示为phone1 =第一小区+价格=第二小区和phone1小区服务费用=第三小区和价格小区服务费用=第四小区

如果我选择phone2的话

phone2 =第一小区+价格=第二小区和phone2蜂窝服务费用=第三小区和低于价格小区服务费用=第四小区

提前谢谢你的帮助。

​

function addRow() {
var table = document.getElementById("table");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td1.innerHTML = document.getElementById("phone1").value;
td2.innerHTML = document.getElementById("txt3").value = '$275';
td3.innerHTML = document.getElementById("phone2").value;
td4.innerHTML = document.getElementById("txt4").value = '$100';

row.appendChild(td1);`enter code here`
row.appendChild(td2);

table.children[0].appendChild(row);
}

<select id="itemType" name="itemType">
    <option id="phone1" value="phone1">phone1</option>
    <option id="phone2" value="phone2">phone2</option>
</select>
<div id="txt3"></div>
<div id="txt4"></div>

<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />

<table id="table" border="1">
    <tr>
        <th>Item</th>
        <th>Cost</th>
    </tr>
</table>

​

Answer 1

<select id="itemType" name="itemType">
    <option id="phone1" value="phone1">phone1</option>
    <option id="phone2" value="phone2">phone2</option>
</select>

<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />

<table id="table" border="1">
    <tr>
        <th>Item</th>
        <th>Cost</th>
        <th>Service Charge</th>
        <th>Total</th>
    </tr>
    <tr id="ItemDetail"></tr>
</table>

<script type="text/javascript">
    function addRow() {
        let select = document.getElementById("itemType")
        let price = 0
        let serviceCharge = 10
        if(select.value == "phone1"){
            price = 275
        }
        else if(select.value == "phone2") {
            price = 100
        }

        let data = `<td>${select.value}</td>
                    <td>$${price}</td>
                    <td>$${serviceCharge}</td>
                    <td>$${price + serviceCharge}</td>`

        document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
    }
</script>