只允许一个(批准/拒绝)复选框进行检查 [英] Allow only one (approve/reject) checkbox to be checked
问题描述
更新:
<%@页面语言=C#AutoEventWireup =真codeBehind =chkbox_checked_uncheked.aspx.cs
继承=Ediable_Repeater.chkbox_checked_uncheked%GT;!< DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< HTML的xmlns =http://www.w3.org/1999/xhtml>
<头=服务器>
<标题>< /标题>
<脚本SRC =脚本/ jQuery的-1.6.2.min.js类型=文/ JavaScript的>< / SCRIPT> <脚本类型=文/ JavaScript的> $(文件)。就绪(函数(){
$('#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(选中)。
});
});
});
< / SCRIPT>
< /头>
<身体GT;
<表ID =form1的=服务器>
< DIV>
< DIV>
<表边框=1>
&所述; TR>
&所述; TD>
< ASP:复选框ID =C1All=服务器级=COL1文本=批准所有/>
< / TD>
&所述; TD>
< ASP:复选框ID =C2All=服务器级=COL2文本=拒绝所有/>
< / TD>
< / TR>
&所述; TR>
&所述; TD>
< ASP:复选框ID =C101=服务器级=COL1文本=约翰0/>
< / TD>
&所述; TD>
< ASP:复选框ID =C201=服务器级=COL2文本=约翰0/>
< / TD>
< / TR>
&所述; TR>
&所述; TD>
< ASP:复选框ID =C102=服务器级=COL1文本=约翰1/>
< / TD>
&所述; TD>
< ASP:复选框ID =C202=服务器级=COL2文本=约翰所有/>
< / TD>
< / TR>
&所述; TR>
&所述; TD>
< ASP:复选框ID =C103=服务器级=COL1文本=约翰·2/>
< / TD>
&所述; TD>
< ASP:复选框ID =C203=服务器级=COL2文本=约翰·2/>
< / TD>
< / TR>
< /表>
< / DIV>
< / DIV>
< /表及GT;
< /身体GT;
< / HTML>
我有一个两列(批准所有/拒绝所有的)我怎么能限制用户只允许有一个复选框,每?
下面是屏幕的输出:
我已经试过这样的事情,但没有工作:
函数SelectApproveAllCheckboxes(CHK,选择器)
{
$('#<%= gv.ClientID%GT;')找到(选择+输入:复选框)。每个(函数()
{
$(本).prop(选中,$(CHK).prop(选中));
});
}
功能SelectRejectAllCheckboxes(CHK,选择器)
{
$('#<%= gv.ClientID%GT;')找到(选择+输入:复选框)。每个(函数()
{
$(本).prop(选中,$(CHK).prop(选中));
});
}< ASP:复选框ID =chkAll=服务器的onclick =SelectApproveAllCheckboxes(这一点,'.approve)/>
< ASP:复选框ID =chkAll1=服务器的onclick =SelectRejectAllCheckboxes(这一点,'.reject)/>
确定根据您的回答我的问题上的评论部分您的问题,这里是一个可行的解决方案。我用静态控件的HTML表格;但你应该能够应用这些概念。
< HTML的xmlns =http://www.w3.org/1999/xhtml>
<头=服务器>
<标题>< /标题>
<脚本SRC =脚本/ jQuery的-1.4.1.min.js类型=文/ JavaScript的>< / SCRIPT>
< /头>
<身体GT;
<表ID =form1的=服务器>
< DIV>
<表边框=1>
&所述; TR>
< TD><输入类型=复选框ID =C1All/>全部批准< / TD>
< TD><输入类型=复选框ID =C2All/>拒绝所有< / TD>
< / TR>
&所述; TR>
< TD><输入类型=复选框ID =C101级=COL1/>约0℃; / TD>
< TD><输入类型=复选框ID =C201级=COL2/>约0℃; / TD>
< / TR>
&所述; TR>
< TD><输入类型=复选框ID =C102级=COL1/>约1 LT; / TD>
< TD><输入类型=复选框ID =C202级=COL2/>约1 LT; / TD>
< / TR>
&所述; TR>
< TD><输入类型=复选框ID =C103级=COL1/>约2'; / TD>
< TD><输入类型=复选框ID =C203级=COL2/>约2'; / TD>
< / TR>
< /表>
< / DIV>
< /表及GT;
<脚本类型=文/ JavaScript的>
$(文件)。就绪(函数(){
$('#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(选中)。
});
});
});
< / SCRIPT>
< /身体GT;< / HTML>
EDITED
由于在asp.net复选框嵌套在跨距标签内使用这个jQuery代替previous之一。
$(文件)。就绪(函数(){
$('#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(选中)。
});
});
});
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屋!