javascript - 1つの（承認/拒否）チェックボックスのみをオンにする

Question

更新しました：

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

2つの列（すべて承認/すべて拒否）があり、それぞれのチェックボックスを1つだけ許可するようにユーザーを制限するにはどうすればよいですか？

画面の出力は次のとおりです。

ここに画像の説明を入力してください

私はこのようなことを試しましたが、うまくいきませんでした：

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

score 4 · Accepted Answer

チェックボックスを使用しないでください。代わりにラジオボタンを使用してください。これらはこのために設計されています。

score 2 · Accepted Answer

あなたの質問に対するコメントセクションでの私の質問に対するあなたの答えに基づいて、ここに実用的な解決策があります. 静的コントロールを含む 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 の代わりにこの 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");
                });
            });
        });

score 0 · Accepted Answer

これを試して：

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

これでうまくいくはずです。

score 0 · Accepted Answer

ラジオボタン prolly を使用すると、すべて選択機能を利用できません。

グループ内のすべてのチェックボックスに同じクラスを指定し、次のようにして 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
});

しかし、より良い選択は、おそらく「上記のいずれでもない」オプションを備えたラジオボタンコントロールを使用することです。そうすれば、検証を行うことができます（それで質問にまったく答えましたか？）

score 0 · Accepted Answer

ラジオボタンの使用に同意します。「すべて選択」チェックボックスを引き続き使用でき、チェックするとラジオボタンを無効にすることができます。

チェックボックスを使用する必要がある場合は、デフォルトのクリック (チェック) アクションを上書きして、最初に他のすべてのボックスのチェックを外すことができます。ライブラリの有無にかかわらず、かなり基本的なjavascriptである必要があります。

javascript - 1つの（承認/拒否）チェックボックスのみをオンにする

5 に答える 5

Related

Reference