HTML表单中复选框选中元素的回显值答案

【问题标题】：Echo value of checkbox checked element in HTML formHTML表单中复选框选中元素的回显值
【发布时间】：2011-11-08 07:00:14
【问题描述】：

我创建了一个 HTML 表单，其中包含由于前一页中的变量而动态检查的复选框（每次只检查一个复选框）。

我想要回显此复选框的值（使页面的主标题不适应 javascript 警报）。

例子：

<html>
    <body>
    <h1>Here I'd like to echo the value of the checkbox that is checked<h1>
    <form id="myform" name="myform">
       <p>
       <input type="checkbox" name="car" id="porsche" /> <label for="porsche">porsche</label><br />
       <input type="checkbox" name="car" id="ferrari" /> <label for="ferrari">ferrari</label><br />
       </p>
    <script type="text/javascript">

    function loopForm(form,car) {
       var cbResults = 'Checkboxes: ';
       var radioResults = 'Radio buttons: ';
       for (var i = 0; i < form.elements.length; i++ ) {
          if (form.elements[i].type == 'checkbox') {
             if (form.elements[i].id == car) {
                 form.elements[i].checked = true ;
             }
          }
        }
     }
     ...
     // This function will check one of the two checkboxes
     loopForm(document.myform,car);
     </script>
     </body>
     </html>

【问题讨论】：

在哪里回显？我不明白你想做什么。
@Rijk van Wel 在页面上回显它。
在不知道为什么的情况下被否决总是好的。
我不明白。什么你想输出哪里？ “制作页面的主标题”是什么意思，你在说什么 javascript alert？
@Sebastian Wramba 我已经编辑了我的帖子来举个例子。

标签： php javascript html forms checkbox

【解决方案1】：

恐怕我能做的最好的事情如下：

var inputs = document.getElementsByTagName('input');
var checkboxes = [];

for (i=0; i<inputs.length; i++){
    if (inputs[i].type == 'checkbox' && inputs[i].getAttribute('checked') == 'checked'){
        checkboxes.push(inputs[i].value);
    }
}

document.getElementsByTagName('h1')[0].innerHTML = checkboxes;

JS Fiddle demo.

这有点笨拙，但至少可以使用纯 JavaScript；尽管它似乎确实需要将选中的复选框标记为如下：checked="checked"。

【讨论】：

【解决方案2】：

您可以使用 jQuery 来实现这一点。监听复选框上的change() 事件，并在发生这种情况时更改h1 的text()。

【讨论】：