javascript - 如何使用 html 中的 javascript 将复选框结果显示到文本字段和空白区域？

Question

我想在上面显示的空文本框和空字段中显示已单击的内容。我已经使用如下警告消息成功地向他们展示了：

 function Chosen() {
        var message = ""
        if (document.getElementById('cbconditioning').checked == true) {
            message += " (AC)"}
     alert("You have selected: " + message +     document.getElementById("cbotherstext").value);

在我请求的代码中，我希望在两个空字段中显示相同的确切结果。

字段及其类型是：

 <input id="cbconditioning" type="checkbox"/>a. Air Conditioning</td>


 <td class="auto-style63" rowspan="3" type="text" id="emptyspace1a" onclick="Chosen()" >
            </td>

 <input id="emptytext1" type="text"/></td>

 <input id="cbotherstext" type="text" disabled="disabled" /></td>

 <input type="button" id="chosenlaunch" onclick="Chosen()" value="Equipments Purchased"/>

我想确保这些字段包含在上面的函数中。

Answer 1

为了简单起见，您应该为每个复选框使用标签标签...

<input id="cbconditioning" type="checkbox"/><label for="cbconditioning">a. Air Conditioning</label></td>

在您选择的功能中，您将......

    var getTextContent = function(node) {
        var content = "";
        try {
            if (node.nodeType == 1) {
                var child = node.firstChild;
                while("undefined" != typeof child && child != null) {
                    content += getTextContent(child);
                    if ("undefined" != typeof child.nextSibling) {
                        child = child.nextSibling;
                    } else {
                        child = null;
                    }
                }
            } else if (node.nodeType == 3) {
               content = node.data;
            } else if (node.nodeType != 8) {
              content = node.nodeValue;
            }
         } catch(e) {
             content = "";
         }
         return ""+content;
    };  

var selectedItems = [];
var labels = document.getElementsByTagName('label');
for(var idx=0;idx<labels.length;idx++) {
    if (labels[idx].hasAttribute('for')) {
        var checkboxNode = document.getElementById(labels[idx].getAttribute('for'));
        if (checkboxNode.checked) {
            selectedItems[selectedItems.length] = getTextContent(labels[idx]);
        }
    }
}
alert('You have selected:'+(selectedItems.join(',')));

将数据放入另一个元素也很容易......

var targetNode = document.getElementById('TargetNode');
while(targetNode.firstChild) { targetNode.removeChild(targetNode.firstChild); }
targetNode.appendChild(document.createTextNode(selectedItems.join(',')));