Question

我有一个包含行的表，每行都有一些<td>个元素。最后一个元素有一个复选框。它们位于<div>，设置为runat="server"。我在页面上有另一个名为“chkAll”的复选框，点击后，我想用javascript检查或取消选中我表格中的所有复选框。

我不是很擅长Javascript，所以我不知道该怎么做。我添加了一个javascript onclick方法，并将document.getelementbyid放入div.clientID，但我不知道该怎么办。有什么想法吗？

Answer 1

将<div>元素作为参考后，使用getElementsByTagName()获取<input>元素，然后检查type属性，如果是复选框，则设置它的checked属性与复选框checked的{{1}}属性相同。例如

chkAll

然后将此函数作为function toggleCheckBoxes(elem) { var div = document.getElementById('<% = divid.ClientID %>'); var chk = div.getElementsByTagName('input'); var len = chk.length; for (var i = 0; i < len; i++) { if (chk[i].type === 'checkbox') { chk[i].checked = elem.checked; } } }元素

的单击事件处理程序附加

chkAll

这是 Working Demo 。将 / edit 添加到网址以查看代码

Answer 2

由于您不熟悉javascript，我不建议使用jQuery。获取javascript的基本概念，然后使用jQuery。

试试这个

function CheckAll()
{
    var tab = document.getElementById ( "tbl1" ); // table with id tbl1
    var elems = tab.getElementsByTagName ( "input" );
    var len = elems.length;

    for ( var i = 0; i < len; i++ )
    {
        if ( elems[i].type == "checkbox" )
        {
            elems[i].checked = true;
        }
    }
}

如果您对使用jQuery有信心，那么可以使用

$("#tbl1 input[type='checkbox']").attr ( 'checked' , true );

在onclick函数中。

Answer 3

尝试使用jQuery - 它使javascript更容易，更简洁。

我认为您的问题的解决方案可以在这里找到：

http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery

Answer 4

尝试以下方法：

aspx中的

：

<asp:CheckBox ID="chkAll" onclick="javascript:CheckUncheckall(this);" Text="Select" runat="server" />
            <table id="tbl" runat="server">
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" Text="A" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="B" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" Text="C" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" Text="D" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" Text="E" /></td>
                </tr>
            </table>

以及下面的javascript：

 <script language="javascript" type="text/javascript">
    function CheckUncheckall(chk) {
    var chks = document.getElementById("<% = tbl.ClientID %>").getElementsByTagName("input");
    for(var i=0; i<chks.length; i++) {
        if(chks[i].type == "checkbox") chks[i].checked= chk.checked;
    }
}
    </script>

Answer 5

我想要javascript检查或取消选中我表格中的所有复选框

<table id="goofy">...</table>

<a href="#" onclick="f(); return false;">Click me to check all boxes in table</a>

和JavaScript：

function f() {
    var inputs_in_table = document.getElementById("goofy").getElementsByTagName("input");
    for(var i=0; i<inputs_in_table.length; i++) {
        if(inputs_in_table[i].type == "checkbox") inputs_in_table[i].checked= true;
    }
}

Answer 6

我使用此脚本创建了一个修改版本，您可以在其中动态传递表名和复选框名称。 Click here to get more infomarion

function checkedAll(container,chkID)
{

var tab = document.getElementById ( container ); // get table  id  which contain check box
var elems = tab.getElementsByTagName ( “input” );

for ( var i = 0; i < elems.length; i++ )
{

if ( elems[i].type == “checkbox” )
{

if ( document.getElementById(chkID).checked ==true)

elems[i].checked = true;

else

elems[i].checked = false;
}

}

}

Answer 7

你可以通过使用jquery直接访问复选框然后循环它们来保存循环元素。

$('input[type=checkbox]').each(function(){ 
    this.checked = true  
});

如果您想隔离页面的特定部分：

$(mydiv).find('input[type=checkbox]').each(function(){ 
    this.checked = true 
});

Answer 8

$('#checkall').click(
 function () {
   $('#divid').find('input[type=checkbox]').each(function () {
     this.checked = $('#checkall').is(':checked')
    });
});

在此情况下，所有复选框都被单个复选框选中和取消选中（checkall-ID）

Javascript检查表/ asp.net中的所有复选框

8 个答案: