我创建了一个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>
我恐怕只能做到如下:
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" .
您可以使用jQuery来实现这一点。监听复选框上的change()事件，并在发生这种情况时更改h1的text()。