Question

我有一个表格，其中有一个标题，该行中有一个复选框。使用javascript将数据动态添加到表中。现在检查标题行中的复选框会检查或取消选中所有行的所有复选框..我已经在方法“checkUncheck（）”中完成了它，即：

<input type="checkbox" id="chkAppId" onclick="checkUncheck()"/>

但现在，假设表中动态添加了10条记录。我检查了标题中的主要复选框。之后，我取消选中其中一个复选框，例如：在第10行，然后必须取消选中标题的复选框....如果我手动检查所有10行复选框，则主标题的复选框必须被检查。这通常是在Yahoo，gmail等中观察到的......

一种方法是计算已检查的数量并将其与总行数进行比较，如果发现相等，则检查主要数量;否则，取消选中主要的。但我无法弄清楚在哪里这样做......不工作！

更新

<html>
<head><title>Checkbox puzzle</title></head>

<body>
    <input type="checkbox" id="chkAppId" onclick="checkUncheck()"/>Main<br/>
    <input type="checkbox" id="chkAppId1" onclick="check()"/>chk1<br/>
    <input type="checkbox" id="chkAppId2" onclick="check()"/>chk2<br/>
    <input type="checkbox" id="chkAppId3" onclick="check()"/>chk3<br/>

  <script type="text/javascript">
    function checkUncheck()
    {
        var totalRows = 4;
        if(document.getElementById("chkAppId").checked){
            checkedAll = true;
        }
        else{
            checkedAll = false;
        }

        for(i = 1; i< totalRows; i++){
            document.getElementById("chkAppId"+i).checked = checkedAll;
        }
    }


    function check()
    {
        var totalRows = 4,count=0;
        for(i = 1; i< totalRows; i++)   {
            if(document.getElementById("chkAppId"+i).checked){
                count= count+1;
            }
        }
        if(count ==totalRows - 1){
            //alert("check Main");
            document.getElementById("chkAppId").checked = true;
        }
        else
        {
            //alert("uncheck Main");
            document.getElementById("chkAppId").checked = false;
        }
    }
  </script>
</body>
</html>

对于可能需要实施此类事情的其他人来说，这是一个更简单的版本，可以解释目的。

Answer 1

当你动态插入复选框时，你会给它们各自不同的ID吗？

发布您拥有的代码，有人可以帮助您。

Answer 2

这是一个包含'动态'行的自包含示例。

<HTML>

<input type="button" value="add row" onclick="add_row()">

<table border id="my_table">
<TR><TH><input type="checkbox" onclick="header_check_click()" id="header_check"></TH><TH>HEADER</TH></TR>
</table>

<FORM name="frm">

<script language="javascript">

var g_check_ids = [];

function header_check_click()
{
    var header_check = document.getElementById("header_check");
    for (var k in g_check_ids)
    {
        var the_check = document.getElementById("check" + g_check_ids[k]);
        the_check.checked = header_check.checked;
    }
}

function fix_header_checkbox()
{   
    var all_checked  = true;

    for (var k in g_check_ids)
    {
        var the_check = document.getElementById("check" + g_check_ids[k]);

        if (!the_check.checked)
        {   all_checked  = false;
        }
    }

    var header_check = document.getElementById("header_check");
    header_check.checked = all_checked;
}

function add_row()
{   
    var tbl = document.getElementById("my_table");
    var cnt = tbl.rows.length;
    var row = tbl.insertRow(cnt);

    var checkCell = row.insertCell(0);
    checkCell.innerHTML = "<input onclick=\"fix_header_checkbox()\" type=\"checkbox\" id=check" + cnt + ">";

    g_check_ids.push(cnt);

    var txtCell = row.insertCell(1);
    txtCell.innerHTML = "Cell " + cnt;
    fix_header_checkbox();
}
add_row();

</script>
</FORM>
</HTML>

需要帮助javascript取消选中一个复选框取消选中主复选框

2 个答案: