堆棧內存溢出
  簡體   English   中英

僅允許選中（批准/拒絕）復選框

[英]Allow only one (approve/reject) checkbox to be checked

 原文  2012-05-12 00:11:40  8   5    javascript/ jquery/ asp.net

問題描述

更新： 

<%@ 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>

我有兩列（全部批准/全部拒絕），如何限制用戶只允許每個復選框使用一個？

這是屏幕的輸出：

在此處輸入圖片說明

我已經嘗試過類似的方法，但是沒有用： 

 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)" />

5 個解決方案

解決方案1
 4  2012-05-12 00:14:45

不要使用復選框，而是使用單選按鈕，它們是為此目的而設計的。

解決方案2
 2 已采納  2012-05-12 01:36:17

根據您對問題的評論部分中對我的問題的回答，確定，這是一個可行的解決方案。 我使用了帶有靜態控件的HTML表； 但您應該能夠應用這些概念。 

<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>

已編輯

因為在asp.net中，復選框嵌套在span標記內，所以要使用此jquery而不是前一個。 

       $(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");
                });
            });
        });

解決方案3
 0  2012-05-12 00:27:15

我同意使用單選按鈕。 您仍然可以使用“全選”復選框，並可以在選中時禁用單選按鈕。

如果必須使用復選框，則可以簡單地覆蓋默認的click（檢查）操作，以首先取消選中所有其他復選框。 不管有沒有庫，它都應該是非常基本的javascript。

解決方案4
 0  2012-05-12 00:55:38

嘗試這個： 

 $('input:checkbox').click(function(){ $('input:checked').removeAttr('checked'); $(this).attr('checked', 'checked'); });

這應該夠了吧。

解決方案5
 0  2012-05-12 00:56:50

如果您僅使用單選按鈕，將不會獲得全選功能。

您可以為組中的所有復選框提供相同的類，並執行以下操作以使用JQuery取消選中所有復選框，同時選中或取消選中所單擊的復選框： 

$('.checkbox').click(function{
// save the original checked state of the one we're clicking:
 var checked = $(this).attr('checked'); 
 $('.checkbox').attr('checked', false); // uncheck all of the boxes
 $(this).attr('checked', !checked); // invert the original state
});

但是更好的選擇可能是使用帶有“以上皆非”選項的單選按鈕控件。 這樣一來，您就可以進行驗證（是否完全可以回答問題？）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 只允許在角形材質中選中一個復選框 只允許選中一個復選框，Angular 最佳實踐。 如果選中了復選框，則僅允許下一個復選框進行檢查 僅選中一個復選框並顯示值 只能選中一個復選框 檢查是否僅選中一個復選框 如果未選中復選框，則僅允許觸發事件 當復選框被選中時允許下拉列表中的一個數據 一次只選中了一個復選框 如何一次只選中一個復選框？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM