Need to SelectAll or Clear all checkboxes
Please help I am trying to code for selectAll or clear all using Jquery. I have a checkboxlist and the value of id seems to be incorre开发者_C百科ct. Id in firebug shows the value "<%= checkboxId.ClientID %>"
Thanks SA
Part of the code:
<a href="javascript:void(0);" onclick="selectClearAlltest('<%= checkboxId.ClientID %>', true)">Select All</a> |
<a href="javascript:void(0);" onclick="selectClearAlltest('<%= checkboxId.ClientID %>', false)">Clear All</a>
<asp:checkboxList id="checkboxId" runat="server" />
Script:
function selectClearAlltest(id, value) {
var chks = $("#" + id + ":input");
chks.attr("checked", value);
}
Your selector is wrong, it makes #checkboxId:input. You should add another space (you're looking for descendants), and better:
var chks = $("#" + id + " input:checkbox");
If Firebug is showing you <%= and %> then it means your page was not parsed/interpreted by the server properly.
These character sequences are usually meant to signify server-processed code, and not make their way into the actual markup. For example, are you trying to execute ASP code in an ".html" file? Or, ... are you trying to execute ASP code on a PHP-based server?
Another way to verify this is to just do a view source on the page, and see if your server-generated code is actually being generated!
Best of luck!!
-Mike
adding a class name would make things simpler e.g.
<asp:checkboxList id="checkboxId" runat="server" CssClass="whatever"/>
and the jQuery code:
function selectClearAlltest(value) {
$(".whatever").attr("checked", value);
}
or even better using jQuery.toggle as
$("#select_all_element_id").toggle(
function () {
$(".whatever").attr("checked", "checked");
},
function () {
$(".whatever").removeAttr("checked");
},
);
Example:
<html>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<a id="toggle-select" href="#">select/deselect all</a>
<hr/>
<input type="checkbox" class='foo'>Click</input>
<input type="checkbox" class='foo'>On</input>
<input type="checkbox" class='foo'>The</input>
<input type="checkbox" class='foo'>The</input>
<input type="checkbox" class='foo'>Link</input>
<input type="checkbox" class='foo'>Above</input>
<input type="checkbox" class='foo'>To</input>
<input type="checkbox" class='foo'>Change</input>
<input type="checkbox" class='foo'>My</input>
<input type="checkbox" class='foo'>Attributes</input>
<script>
$(document).ready(function(){
$("#toggle-select").toggle(
function () {
$(".foo").attr("checked", "checked");
},
function () {
$(".foo").removeAttr("checked");
}
);
});
</script>
</body>
加载中,请稍侯......
精彩评论