1

私の問題は、下のチェックボックスをクリックすると、チェック機能が呼び出されてすべてのチェックボックスがオン/オフになることです。ただし、呼び出しチェックボックス（「onchange」イベントがあるチェックボックス）に対して相対的に変更する必要があります。

チェックボックスのHTML宣言：

<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">

サンプルJavaScriptコード： 

$.fn.check = function() {
    $(this).each(function(){
        $(this).attr('checked', checked);
    });
}

そして私の質問は、「すべてチェック」チェックボックスに対応するDOMオブジェクトを取得するにはどうすればよいですか？

4

3 に答える 3

1

編集：thischeckAllのオブジェクトを関数に渡します。

デモ

<input type="checkbox" 
   onchange="$('input[type=checkbox][rel=users]').check(this);" />

thisとして渡されることに注意してください.check(this)

そしてJSでは：

$(document).ready(function() {
    $.fn.check = function(orgEl) {
        $(this).each(function() {
            $(this).attr('checked', orgEl.checked);
        });
    }
});

古い投稿-

checkAllチェックボックスをハンドラーにバインドし、内部からfxnを呼び出します。以下を参照してください。

HTML

<input type="checkbox" id="checkAll" >

JS

   $(document).ready (function () {
       $('#checkAll').click (function () {
          //this inside is checkAll checkbox object.
          $('input[type=checkbox][rel=users]').check();
       });
   });
于 2012-04-06T19:17:40.073 に答える
1

これを「チェックオール」チェックボックスにバインドしているので、インラインでそれ自体にアクセスできます。.check()したがって、作成したjQuery関数に渡してそこで使用できます。これを見てください:(あなたの選択に対する私の変更を許してください、あなたは明らかにあなたが以前持っていたものを使うことができます...しかし私は:checkbox代わりに使うことを提案しますinput[type=checkbox]）

<html>
<head>
    <script type="text/javascript" src="jquery-min.js"></script>
    <script type="text/javascript">
        $.fn.check = function (obj) {
            $(this).each(function (){
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
<body>

于 2012-04-06T19:26:54.197 に答える
1

JSFIDDLEで表示します。

私はこのようなものにHTML5データ属性を使用するのが好きです。次のDOM構造を使用するとdata-target、トリガーチェックボックスの属性を使用してターゲットチェックボックスを定義できます。ターゲットは有効なjQueryセレクター文字列である必要があります。

HTML：

<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">

<label for="checkUsers">Users:</label>

<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">


<br><br>


<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">

<label for="checkPlaces">Places:</label>

<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">

次に、トリガーチェックボックスのチェックされた属性に基づいてチェック/チェック解除をトリガーするために定義したターゲットを使用するようにプラグインを設定します。

プラグイン：

(function( $ ){

  $.fn.check = function() {  

    // "this" is a jQuery object of the checkbox that was clicked.
    var target = this.data("target");
    $(target).attr("checked", this[0].checked);

    return this; //maintain chainability

  };

})( jQuery );

このメソッドの本当の利点は、イベントをのclass代わりにアタッチすることで、1つのイベントハンドラー宣言を管理するだけで済むことですid。

イベントハンドラー宣言：

$(function(){

    $(".checkAll").click(function(){
        $(this).check();
    });

});
于 2012-04-06T20:16:48.337 に答える