3

重複の可能性：
JavascriptまたはJqueryを使用してすべてのチェックボックスをオンおよびオフにします

ページに 12 個の asp:checkbox があり、それらすべてを選択/選択解除するものを追加したいと考えています。それを行う最善の方法は何ですか？

jquery を使っている人を見てきましたが、JS にはあまり詳しくありません。使用する一般的な jquery 関数はありますか?

<head>...
   <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
...</head>

<body>...
    <script type="text/javascript">
        function Selectall() {
            if ($('.JchkAll').is(':checked')) {
                // .JchkGrid cssClass will be assigned to all other checkboxes in your control 
                $('.JchkGrid').attr('checked', 'true');
            }
            else {
                $('.JchkGrid').removeAttr('checked', 'false');
            }
        } 
    </script>
<form>...
<asp:CheckBox runat="server" ID="cbSelectAll" Text="Select/Deselect All" CssClass="JchkAll" onchange="Selectall();"/>
        <asp:CheckBox runat="server" ID="cbName" Text="Name" class="JchkGrid"/>
        <asp:CheckBox runat="server" ID="cbModel" Text="Model" CssClass="JchkGrid"/>
...</form>
...</body>
4

5 に答える 5

3

あなたのチェックボックスにcssクラスを与えて、この方法を試してください

// .JchkAll is cssclass of your checkbox on which's click you need to check all Checkboxes

function Selectall() {
  if ($('.JchkAll').is(':checked')) {
   // .JchkGrid cssClass will be assigned to all other checkboxes in your control
    $('.JchkGrid').attr('checked', 'true');
  }
  else {
    $('.JchkGrid').removeAttr('checked', 'false');
  }
}

編集：

また、チェックボックスの onchange 属性にこれを追加することを忘れないでください..

<asp:CheckBox runat="server" onchange="Selectall();" ID="cbSelectAll" 
     Text="Select/Deselect All" CssClass="JchkAll"/>

しかし、これによりコンパイラの警告が表示されます...次のようにPage_Loadイベントのコードビハインドから追加した方がよいでしょう

    cbSelectAll.Attributes.Add("onchange","Selectall");
于 2012-07-27T10:13:13.517 に答える
2

最初にすべてのチェックボックスを見つけてから、それらを変更します。これは、javascript を介してクライアントで行いました。たとえば、これは呼び出すとページ上のすべてのチェックボックスをチェックする関数です。

function SwapCheck()
{   
    // find them
    var allChecks = jQuery('input[type=checkbox]');

    allChecks.each( function() {
        jQuery(this).prop("checked", !this.checked);
        // use this for jQuery ver 1.6 and before
        // jQuery(this).attr("checked", !this.checked);
    });     
}

いくつかのチェックボックスを削除したい場合は、それらをスパンまたは div でワープし、

jQuery('#DivIDWithChecksToSelect input[type=checkbox]');

それらをすべてチェックしたい場合は、このコードを使用できます

jQuery(this).attr("checked", "checked");

を使用しjQuery(this).prop("checked", false);てチェックを外すこともできます。

相対:
jQueryでチェックボックスに「チェック済み」を設定しますか?
GridView のすべてのチェック ボックスをオンにします。

.attr()ここで.prop()読むことについて： http://api.jquery.com/prop/

于 2012-07-27T10:12:56.973 に答える
1

チェックボックスに 1 つの CssClass 名 (私の例では chk_group) を付け、それらすべてを別の CssClass 名 (私の例では chk_select_all) に変更するチェック ボックスを付けます。

次に、このjQueryコードを試すことができます

​$(document).ready(function(){
    $(".chk_select_all input[type=checkbox]").click(function(){
       $(".chk_group input[type=checkbox]").attr('checked', this.checked); 
    });
 });​

ここで動作中のバージョンを確認してください: http://jsfiddle.net/a2XeK/

ASP.NET WebForms では、セレクター .chk_select_all input[type=checkbox] を使用する必要があります。これは、レンダリング エンジンが with css スタイルを作成し、スパン内に実際のチェックボックスがあるためです。

于 2012-07-27T10:19:46.080 に答える
0

それを行う複数の方法。あなたに最適なものをご覧ください。JavaScript の使用

function toggleCheckboxes(flag) {    
    var form = document.getElementById('groupImportForm');
    var inputs = form.elements;
    if(!inputs){
        //console.log("no inputs found");
        return;
    }
    if(!inputs.length){
        //console.log("only one elements, forcing into an array");
        inputs = new Array(inputs);        
    }

    for (var i = 0; i < inputs.length; i++) {  
      //console.log("checking input");
      if (inputs[i].type == "checkbox") {  
        inputs[i].checked = flag;
      }  
    }  
}

お役に立てれば。

于 2012-07-27T10:15:00.083 に答える
-2

必要に応じて、分離コードで実行できます。メイン チェックボックスの OnCheckedChanged イベントで、チェックボックスのすべての Checked 変数を true に設定します。

于 2012-07-27T10:12:17.683 に答える