只允许一个（批准/拒绝）复选框进行检查 [英] Allow only one (approve/reject) checkbox to be checked
本文介绍了只允许一个（批准/拒绝）复选框进行检查的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
更新：
＆LT;％@页面语言=C＃AutoEventWireup =真codeBehind =chkbox_checked_uncheked.aspx.cs
继承=Ediable_Repeater.chkbox_checked_uncheked％GT;！＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本SRC =脚本/ jQuery的-1.6.2.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT; $（文件）。就绪（函数（）{
$（'＃C1All'）。点击（函数（）{
调试器
$（'。COL1'）ATTR（选中，$（'＃C1All'）ATTR（选中））;
$（'。COL2'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）; $（'＃C2All'）。点击（函数（）{
调试器
$（'。COL2'）ATTR（选中，$（'＃C2All'）ATTR（选中））;
$（'。COL1'）removeAttr（选中）。
$（'＃C1All'）removeAttr（选中）。
}）; $（'。COL1'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（本）.attr（'身份证'）;
调试器
变种coresId = id.replace（'C1'，'C 2'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）; $（'。COL2'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（本）.attr（'身份证'）;
变种coresId = id.replace（'C2'，'C1'）;
调试器
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
＆LT; DIV＆GT;
＆LT;表边框=1＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C1All=服务器级=COL1文本=批准所有/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C2All=服务器级=COL2文本=拒绝所有/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C101=服务器级=COL1文本=约翰0/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C201=服务器级=COL2文本=约翰0/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C102=服务器级=COL1文本=约翰1/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C202=服务器级=COL2文本=约翰所有/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C103=服务器级=COL1文本=约翰·2/＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：复选框ID =C203=服务器级=COL2文本=约翰·2/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我有一个两列（批准所有/拒绝所有的）我怎么能限制用户只允许有一个复选框，每？
下面是屏幕的输出：
我已经试过这样的事情，但没有工作：
函数SelectApproveAllCheckboxes（CHK，选择器）
{
$（'＃＆LT;％= gv.ClientID％GT;'）找到（选择+输入：复选框）。每个（函数（）
{
$（本）.prop（选中，$（CHK）.prop（选中））;
}）;
}
功能SelectRejectAllCheckboxes（CHK，选择器）
{
$（'＃＆LT;％= gv.ClientID％GT;'）找到（选择+输入：复选框）。每个（函数（）
{
$（本）.prop（选中，$（CHK）.prop（选中））;
}）;
}＆LT; ASP：复选框ID =chkAll=服务器的onclick =SelectApproveAllCheckboxes（这一点，'.approve）/＆GT;
＆LT; ASP：复选框ID =chkAll1=服务器的onclick =SelectRejectAllCheckboxes（这一点，'.reject）/＆GT;
解决方案
确定根据您的回答我的问题上的评论部分您的问题，这里是一个可行的解决方案。我用静态控件的HTML表格;但你应该能够应用这些概念。
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本SRC =脚本/ jQuery的-1.4.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
＆LT;表边框=1＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C1All/＆GT;全部批准＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C2All/＆GT;拒绝所有＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C101级=COL1/＆GT;约0℃; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C201级=COL2/＆GT;约0℃; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C102级=COL1/＆GT;约1 LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C202级=COL2/＆GT;约1 LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C103级=COL1/＆GT;约2'; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=复选框ID =C203级=COL2/＆GT;约2'; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃C1All'）。点击（函数（）{
$（'。COL1'）ATTR（选中，$（'＃C1All'）ATTR（选中））;
$（'。COL2'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）; $（'＃C2All'）。点击（函数（）{
$（'。COL2'）ATTR（选中，$（'＃C2All'）ATTR（选中））;
$（'。COL1'）removeAttr（选中）。
$（'＃C1All'）removeAttr（选中）。
}）; $（'。COL1'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（本）.attr（'身份证'）;
变种coresId = id.replace（'C1'，'C 2'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）; $（'。COL2'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（本）.attr（'身份证'）;
变种coresId = id.replace（'C2'，'C1'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
EDITED
由于在asp.net复选框嵌套在跨距标签内使用这个jQuery代替previous之一。
$（文件）。就绪（函数（）{
$（'＃C1All'）。点击（函数（）{
$（'。COL1＆GT;输入'）。ATTR（选中，$（'＃C1All'）ATTR（选中））;
$（'。COL2＆GT;输入'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）; $（'＃C2All'）。点击（函数（）{
$（'。COL2＆GT;输入'）。ATTR（选中，$（'＃C2All'）ATTR（选中））;
$（'。COL1＆GT;输入'）removeAttr（选中）。
$（'＃C1All'）removeAttr（选中）。
}）; $（'。COL1'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（输入，这一点）.attr（'身份证'）;
变种coresId = id.replace（'C1'，'C 2'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）; $（'。COL2'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（输入，这一点）.attr（'身份证'）;
变种coresId = id.replace（'C2'，'C1'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）;
}）;
updated:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="chkbox_checked_uncheked.aspx.cs"
Inherits="Ediable_Repeater.chkbox_checked_uncheked" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#C1All').click(function () {
debugger
$('.col1').attr("checked", $('#C1All').attr("checked"));
$('.col2').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
$('#C2All').click(function () {
debugger
$('.col2').attr("checked", $('#C2All').attr("checked"));
$('.col1').removeAttr("checked");
$('#C1All').removeAttr("checked");
});
$('.col1').each(function () {
$(this).click(function () {
var id = $(this).attr('id');
debugger
var coresId = id.replace('C1', 'C2');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
$('.col2').each(function () {
$(this).click(function () {
var id = $(this).attr('id');
var coresId = id.replace('C2', 'C1');
debugger
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<table border="1">
<tr>
<td>
<asp:CheckBox ID="C1All" runat="server" class="col1" Text="approve all" />
</td>
<td>
<asp:CheckBox ID="C2All" runat="server" class="col2" Text="Reject all" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="C101" runat="server" class="col1" Text="john 0" />
</td>
<td>
<asp:CheckBox ID="C201" runat="server" class="col2" Text="john 0" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="C102" runat="server" class="col1" Text="john 1" />
</td>
<td>
<asp:CheckBox ID="C202" runat="server" class="col2" Text="john all" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="C103" runat="server" class="col1" Text="john 2" />
</td>
<td>
<asp:CheckBox ID="C203" runat="server" class="col2" Text="John 2" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
i have a two columns (approve all/reject all) how can i restrict the user to allow only one checkbox of each?
here is the output of the screen:
i have tried something like this but did not work:
function SelectApproveAllCheckboxes(chk, selector)
{
$('#<%=gv.ClientID%>').find(selector + " input:checkbox").each(function ()
{
$(this).prop("checked", $(chk).prop("checked"));
});
}
function SelectRejectAllCheckboxes(chk, selector)
{
$('#<%=gv.ClientID%>').find(selector + " input:checkbox").each(function ()
{
$(this).prop("checked", $(chk).prop("checked"));
});
}
<asp:CheckBox ID="chkAll" runat="server" onclick="SelectApproveAllCheckboxes(this, '.approve)" />
<asp:CheckBox ID="chkAll1" runat="server" onclick="SelectRejectAllCheckboxes(this, '.reject)" />
解决方案
OK based on your answer to my questions on the comments section to your question, here is a working solution. I've used a HTML table with static controls; but you should be able to apply the concepts.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1">
<tr>
<td><input type="checkbox" id="C1All" />Approve All</td>
<td><input type="checkbox" id="C2All" />Reject All</td>
</tr>
<tr>
<td><input type="checkbox" id="C101" class="col1" />John 0</td>
<td><input type="checkbox" id="C201" class="col2" />John 0</td>
</tr>
<tr>
<td><input type="checkbox" id="C102" class="col1" />John 1</td>
<td><input type="checkbox" id="C202" class="col2" />John 1</td>
</tr>
<tr>
<td><input type="checkbox" id="C103" class="col1" />John 2</td>
<td><input type="checkbox" id="C203" class="col2" />John 2</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#C1All').click(function () {
$('.col1').attr("checked", $('#C1All').attr("checked"));
$('.col2').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
$('#C2All').click(function () {
$('.col2').attr("checked", $('#C2All').attr("checked"));
$('.col1').removeAttr("checked");
$('#C1All').removeAttr("checked");
});
$('.col1').each(function () {
$(this).click(function () {
var id = $(this).attr('id');
var coresId = id.replace('C1', 'C2');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
$('.col2').each(function () {
$(this).click(function () {
var id = $(this).attr('id');
var coresId = id.replace('C2', 'C1');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
});
</script>
</body>
</html>
EDITED
since in asp.net checkboxes are nested within the span tags make use of this jquery instead of the previous one.
$(document).ready(function () {
$('#C1All').click(function () {
$('.col1 > input').attr("checked", $('#C1All').attr("checked"));
$('.col2 > input').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
$('#C2All').click(function () {
$('.col2 > input').attr("checked", $('#C2All').attr("checked"));
$('.col1 > input').removeAttr("checked");
$('#C1All').removeAttr("checked");
});
$('.col1').each(function () {
$(this).click(function () {
var id = $("input", this).attr('id');
var coresId = id.replace('C1', 'C2');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
$('.col2').each(function () {
$(this).click(function () {
var id = $("input", this).attr('id');
var coresId = id.replace('C2', 'C1');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
});
这篇关于只允许一个（批准/拒绝）复选框进行检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
