![](/img/trans.png)
[英]WPF: Check/Uncheck all checkbox for checkboxes located in gridview cell template?
[英]Check uncheck all CheckBoxes on the basis of another CheckBox
我想在用户点击第一个复选框(全部)时选择和取消选中所有复选框。 如果用户取消选中任何复选框,则只取消选中该复选框和第一个复选框(全部),并且不更改其余复选框。
我的页面中有一个Checkboxlist
,我正在动态填充。
<asp:CheckBoxList runat="server" ID="cbExtList" />
private Extensions _extension = new Extensions();
private ExtCollection _extCollection = new ExtCollection();
_extCollection = _extension.GetAll();
Dictionary<int, string> dExtensions = new Dictionary<int, string>();
dExtensions.Add(0, "All");
foreach (Extensions ext in _extCollection)
{
dExtensions.Add(ext.ID, ext.Extension);
}
this.cbExtList.DataSource = dExtensions;
this.cbExtList.DataTextField = "Value";
this.cbExtList.DataValueField = "Key";
this.cbExtList.DataBind();
现在一切正常。 我只想在单击此Checkboxlist
的第一个复选框“全部”时选择所有扩展。
这就是我尝试使用代码隐藏的方法。
使用OnSelectedIndexChanged
并设置AutoPostBack = True
<asp:CheckBoxList runat="server" ID="cbExtList" OnSelectedIndexChanged="cbExtList_OnSelectedIndexChanged" AutoPostBack="True" />
protected void cbExtList_OnSelectedIndexChanged(object sender, EventArgs e)
{
try
{
if (Convert.ToInt32(this.cbExtList.SelectedItem.Value) == 0)
{
foreach (ListItem li in cbExtList.Items)
{
li.Selected = true;
}
}
else
{
foreach (ListItem li in cbExtList.Items)
{
li.Selected = false;
}
}
}
catch (Exception ex)
{
Monitoring.WriteException(ex);
}
}
jQuery方式来做到这一点。
这是我实现给定功能所需的唯一jQuery代码。
$(document).ready(function() {
$('[id$=checkAllExts]').click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("[id*=cbExtList_]").change(function () {
if ($('input[id*=cbExtList_][type=checkbox]:checked').length == $('input[id*=cbExtList_][type=checkbox]').length) {
$('[id$=checkAllExts]').prop('checked', true);
} else {
$('[id$=checkAllExts]').prop('checked', false);
}
});
});
为了获取ASP.NET控件的ID,我使用了jQuery属性选择器,这是一种更好,更简单的直接方式。
[名$ = “值”]
选择具有指定属性的元素,其值以与给定字符串完全相同的结尾。 比较区分大小写。
[名* = “值”]
选择具有指定属性的元素,其值包含给定的子字符串。
所以$('[id$=checkAllExts]')
返回父复选框,我选中/取消选中所有复选框。
并且$('[id$=cbExtList_]')
返回除了父复选框之外的所有复选框,并相应地执行我的操作。
在客户端使用JavaScript检查和取消选中CheckBoxList
的解决方案。
JavaScript的方式来做到这一点。
<script type="text/javascript">
var Counter;
function ExtAll(CheckBox)
{
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.leftCB.ClientID %>');
var TargetChildControl = "cbExtList";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes.
for (var n = 0; n < Inputs.length; ++n) {
if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
}
Counter = CheckBox.checked ? TotalChkBx : 0;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;
//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
</script>
我在复选框列表前添加了一个复选框,以使用其引用来选择/取消选中复选框列表。 在那个复选框上,我在onclick
事件发生时调用JavaScript函数。
<div id="leftCB" class="lbl" style="padding-left: 0px;" runat="server">
<asp:CheckBox runat="server" ID="checkAllExts" Text="All" onclick="javascript:ExtAll(this);" />
<asp:CheckBoxList runat="server" ID="cbExtList" />
</div>
代码背后
private Extensions _extension = new Extensions();
private ExtCollection _extCollection = new ExtCollection();
_extCollection = _extension.GetAll();
Dictionary<int, string> dExtensions = new Dictionary<int, string>();
foreach (Extensions ext in _extCollection)
{
dExtensions.Add(ext.ID, ext.Extension);
// Added the below line for the functionality of CheckBoxList
// which adds an attribute with all of the checkboxes in the CheckBoxList
this.cbExtList.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", this.checkAllExts.ClientID);
}
this.cbExtList.DataSource = dExtensions;
this.cbExtList.DataTextField = "Value";
this.cbExtList.DataValueField = "Key";
this.cbExtList.DataBind();
我已经使用jQuery和Javascript来组合一个示例,根据第一个或All
复选框的选中状态检查/取消选中复选框列表中的项目。
ASPX:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var checkedState = false;
function checkAll() {
$("input[id^=cblMultiple]").each(function () {
if ($(this).val() == 0) {
checkedState = $(this).is(":checked")
}
else {
$(this).attr("checked", checkedState)
}
//console.log(checkedState);
//console.log($(this).val());
});
}
$(document).ready(function () {
$("input[id^=cblMultiple]").each(function () {
if ($(this).val() == 0) {
$(this).on("click", checkAll);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBoxList runat="server" ID="cblMultiple"/>
</form>
</body>
</html>
代码背后
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cblMultiple.Items.Add(new ListItem("All", "0"));
for (int i = 1; i < 11; i++)
{
cblMultiple.Items.Add(new ListItem("All" + i, i.ToString()));
}
}
}
如果您需要检查所有复选框以检查“全部”复选框并在取消选中后取消选中它们,但还需要在选中“全部”复选框时禁用每个复选框(除了“全部”)复选框,代码应该适合你。 它还具有不需要JavaScript / jQuery的额外好处。
这是.aspx代码(对于这种情况,我有九个设施可以任意组合选择):
<asp:Label ID="lblFacility" AssociatedControlID="chkFacility" runat="server" Text="Facility: "></asp:Label>
<asp:CheckBoxList ID="chkFacility" runat="server" OnSelectedIndexChanged="chkFacility_SelectedIndexChanged">
<asp:ListItem Value="All" Text="All"></asp:ListItem>
<asp:ListItem Value="Location1" Text="Location 1"></asp:ListItem>
<asp:ListItem Value="Location2" Text="Location 2"></asp:ListItem>
<asp:ListItem Value="Location3" Text="Location 3"></asp:ListItem>
<asp:ListItem Value="Location4" Text="Location 4"></asp:ListItem>
<asp:ListItem Value="Location5" Text="Location 5"></asp:ListItem>
<asp:ListItem Value="Location6" Text="Location 6"></asp:ListItem>
<asp:ListItem Value="Location7" Text="Location 7"></asp:ListItem>
<asp:ListItem Value="Location8" Text="Location 8"></asp:ListItem>
<asp:ListItem Value="Location9" Text="Location 9"></asp:ListItem>
</asp:CheckBoxList>
而守则背后:
protected void chkFacility_SelectedIndexChanged(object sender, EventArgs e) {
//disables all the checkboxes when "All" is selected
if (chkFacility.SelectedIndex==0) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Selected = true;
if (aListItem.Value != "All") {
aListItem.Enabled = false;
}
}
} else if (chkFacility.SelectedIndex > 0) {
var i = 0;
foreach(ListItem aListItem in chkFacility.Items) {
if (aListItem.Selected) {
i++;
}
}
//with the i++ check above, this handles unchecking every checkbox when each location is selected and the "All" checkbox is unchecked
if (i == 9) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Selected = false;
aListItem.Enabled = true;
}
//disables the "All" checkbox in all other cases where 8 or fewer of the 9 locations are selected
} else {
foreach(ListItem aListItem in chkFacility.Items) {
if (aListItem.Value == "All") {
aListItem.Enabled = false;
}
}
}
//if no locations are selected after PostBack, make sure all checkboxes are enabled
} else if (chkFacility.SelectedIndex == -1) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Enabled = true;
}
}
}
但是,对于这种实现的一个警告是,如果所有位置都被选中的代码也将清除选择,如果它们当前都是通过手动检查每个位置来选择的。 当我编写工作代码时,这个边缘情况是可接受的风险,考虑到它不太可能,并且考虑到如果需要选择所有位置,用户应该检查“全部”复选框,无论如何。
循环遍历列表并将项目的Selected值设置为true / false:
for (int i = 0; i < cbExtList.Items.Count; i++)
{
cbExtList.Items[i].Selected = true;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.