Question

我想在html中获取复选框的总数。

请求：（1）通过Javascript （2）我的所有复选框id都是“id = idCheckBox”，（3）每个复选框名称保留用于后端使用。不是为了javascript。（4）每个复选框名称的命名类似于checkbox_1，checkbox_2，...其中数字表示复选框的序列号。

表格Html

<table class="form_table" border="0" cellpadding="0" width="750px" id="idRoutineListTable">   
<tr>
   <td style="align:center;" class="routineListCell">
   <input type='checkbox' name='checkbox_1' id='idCheckBox'></input>
   <!-- It may many checkbox here.-->
   </td>
</tr>
</table>

我的JS代码，该功能是检查删除前选中的任何复选框。如果没有选中复选框，则会弹出警告。

function beforeDelete()  /*{{{*/ 
{
    var checked=0;
    var checkboxAll=document.all["idCheckBox"];
    //the error is here, when there is only one checkbox, I cannot get length value, 
    //coz checkboxAll is not recognized as an array. However, if there are more than  
    //two checkboxes, the function works.
    alert (checkboxAll.length);    
    for(var i=0;i<checkboxAll.length;i++) {
        if (checkboxAll[i].checked==true) {
            checked++;
        }
    }
    if(checked==0) {
        alert('Please select the item you will delete');
        return false;
    } 
}  /*}}}*

问题已在上面的代码中指出。有什么想法解决这个问题吗？

Answer 1

这是一个使用jQuery的完整工作示例：

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
    function beforeDelete() {
        if ($("input:checked").length == 0) {
            alert('Please select the item you will delete');
            return false;
        }
        return true;
    }
</script>


<form onsubmit="return beforeDelete()">
    <table class="form_table" border="0" cellpadding="0" width="750px" id="idRoutineListTable">   
    <tr>
       <td style="align:center;" class="routineListCell">
       <input type='checkbox' name='checkbox_1' id='idCheckBox'></input>
       <input type='checkbox' name='checkbox_2' id='idCheckBox'></input>
       <input type='checkbox' name='checkbox_3' id='idCheckBox'></input>
       <!-- It may many checkbox here.-->
       </td>
    </tr>
    </table>   
    <input type="submit" />
</form>

Answer 2

试试这个：

function beforeDelete()  {
    var checkboxAll=document.getElementsByTagName("input");   
    for(var i=0;i<checkboxAll.length;i++) {
        var input = checkboxAll[i];
        if (input.type == "checkbox" && input.checked==true) {
            return true;
        }
    }

    alert('Please select the item you will delete');
    return false;   
}

Answer 3

第一个决定：您可以使用 checkboxAll.length 作为条件来检查标记中是否只有一个复选框。

if(checkboxAll.length == undefined)

如果没有，您可以使用循环代码，如果它只有一个复选框 - 只检查一个。

第二个决定：使用将返回数组的getElementsByTag。在这种情况下，您需要使用给定的id

过滤此数组

Demo for both decisions here

Answer 4

您的代码存在一些缺陷。首先document.all是IE特定的，因此您无法在其他浏览器中使用它。此外，您似乎对不同的复选框使用相同的ID。我必须是独一无二的。

你能做的最好的事情是将复选框的父元素（在本例中为：＆lt; td＆gt;）传递给check函数，并使用[passedElement] .getElementsByTagName（'input'）循环遍历NodeList。像这样：

function checkChecked(el){
    var boxes = el.getElementsByTagName('input');
    for (var i = 0; i<boxes.length; i = i+1 ){
        if ( /check/i.test(boxes[i].type) && boxes[i].checked ) {
            return true;
        }
    }
    return alert('you didn\'t check anything!');
}

查看（并随意玩）this jsfiddle

如何通过Javascript计算表中的复选框数量

4 个答案: