Question

<form id="form1" name="form_check" method="post" action="">
<p align="center">
<input type="checkbox" name="role[]" value="1">
<input type="checkbox" name="role[]" value="2">
<input type="checkbox" name="role[]" value="3"></p> 
<input type="submit" name="Submit" onclick="check_all()">
<script>
function check_all(){
    checkedBox="x"
    for(var i=0;i<document.getElementsByName('role[]').length;i++){
        if(document.getElementsByName('role[i]').checked == true){
            checkedBox="y"
            break // No need to check the rest since only one can be checked.
        }
    }
    if(checkBox == "x"){
        alert("Checkbox not checked")
    }
}
</script>

我已经编写了上面的代码来检查是否选中了复选框。它不会在JavaScript区域中执行if语句。我无法获得输出。在JSfiddle中，当iam尝试执行此脚本时，我收到此错误：

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x22c58d0>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x25563d0>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x22c58d0>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x2556cd0>, 'help_text': '', 'name': 'js_wrap'}"}

这个脚本对我有用：

var radios = document.getElementsByName('role[]');

checkedBox = "x";
for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        //alert("checked: " + radios[i].value);
        checkedBox = "y";
        break; // No need to check the rest since only one can be checked.
    }
}

Answer 1

您已声明变量checkedBox，但在if条件下您正在使用checkBox
document.getElementsByName('role[i]')将为null，因为没有匹配的元素。（ document.getElementsByName('role[' + i + ']')也会因为同样的原因而为空。）

您实际需要使用的是

document.getElementsByName('role[]')[i].checked.

但是像这样访问DOM in循环不是一个好习惯，最好将htmlCollection存储在变量中。

所以你的代码应该看起来像

function check_all() {
 checkedBox = "x";
 var checkboxes = document.getElementsByName('role[]');
 for (var i = 0; i < checkboxes.length; i++) {
    if ( checkboxes[i].checked) {
        checkedBox = "y"
        break // No need to check the rest since only one can be checked.
    }
 }
 if (checkedBox == "x") {
    alert("Checkbox not checked");
    return false;
 }
}

JSFiddle

附注：

恕我直言，对于标记使用boolean值比x，y等更好的可读性可理解性是一个好习惯...
您没有关闭共享代码中的<form>标记...

Answer 2

我想你会希望i不是文字i：

if(document.getElementsByName('role[' + i + ']').checked == true){

您始终可以使用console.log作为调试辅助工具来查找这类错误。

数组checkbox.checked javascript无法正常工作

2 个答案: