Question

我创建了一个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>

Answer 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"。

Answer 2

您可以使用jQuery来实现此目的。在复选框上收听change()事件，并在发生这种情况时更改h {的text()。

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

2 个答案: