我有一个包含行的表，每行都有几个 <td> 元素。最后一个元素有一个复选框。
它们位于设置为runat="server" 的<div> 中。我在页面上有另一个名为“chkAll”的复选框，当我点击它时，我想用javascript检查或取消选中我表中的所有复选框。
我不太擅长 Javascript，所以我不知道该怎么做。我添加了一个 javascript onclick 方法，并将 document.getelementbyid 放入 div.clientID，但我不知道从那里做什么。有什么想法吗？
【问题讨论】：
标签： asp.net javascript
$('#checkall').click(
function () {
$('#divid').find('input[type=checkbox]').each(function () {
this.checked = $('#checkall').is(':checked')
});
});
在此，所有复选框均由单个复选框选中和取消选中 (checkall - id)
【讨论】：
您可以通过使用 jquery 直接访问复选框然后循环它们来节省循环元素。
$('input[type=checkbox]').each(function(){
this.checked = true
});
如果您想隔离页面的特定部分：
$(mydiv).find('input[type=checkbox]').each(function(){
this.checked = true
});
【讨论】：
我使用此脚本创建了一个修改版本，您可以在其中动态传递表名和复选框名称。 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;
}
}
}
【讨论】：
尝试以下方法：
在 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>
【讨论】：
一旦你有 <div> 元素作为参考，使用 getElementsByTagName() 来获取 <input> 元素，然后检查 type 属性，如果它是一个复选框，那么将它的 checked 属性设置为复选框chkAll 的checked 属性。例如
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元素的单击事件处理程序
<input type="checkbox" id="chkAll" onclick="toggleCheckBoxes(this)" />
这是 Working Demo。将 /edit 添加到 URL 以查看代码
【讨论】：
<div> 中的每个复选框上设置一个单击事件处理程序，以检查其他复选框的checked 属性-如果未选中所有复选框，然后取消选中 chkAll 复选框。如果所有这些都被选中，请选中 chkAll 复选框。既然你知道如何获取复选框并检查它们的 checked 属性，我将把它作为练习留给你
我想选中或取消选中 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;
}
}
【讨论】：
由于您是 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 函数中。
【讨论】：
<%= tableid.ClientID %> 来渲染发送给客户端的 HTML 标记中的表的生成客户端 ID
尝试使用 jQuery - 它使 javascript 更简单，更简洁。
我认为可以在这里找到解决您问题的方法：
http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery
【讨论】：