web-dev-qa-db-ja.com

チェックボックスとJQUERY：「チェックされる」は常にFALSE

コードは下にあり、チェックボックスは常にFALSEです。しかし、ページ上では異なります。オンまたはオフになりません。

<script type="text/javascript">
 $('.cbOzelHastaAdi').unbind('click');

 $('.cbOzelHastaAdi').click( function() {

    var parentDiv = $(this).parent().get(0);
    var cbs = $(parentDiv).find('table input:checkbox');

   if($(this).attr("checked") === "true") {
        cbs.each(function() { $(this).attr('checked', false); });
    }
    else{
        cbs.each(function() { $(this).attr('checked', true); });
    }

})

</script>
jquerycheckbox
17
uzay95

問題の1つは、上部のチェックボックスとラベルを囲むスパンにchecked属性があり、イベントハンドラーをスパンにバインドしていたため、checkedが常にスパンでcheckedのままになることです。

代わりにイベントハンドラーをチェックボックスに移動し、コードを少し整理しました。 HTML要素に独自の属性を構築することに問題があるとは思わない（つまり、span要素のチェックされた属性）（XHTMLの厳密な検証はそれらで失敗すると思います）が、それを行うのが良い習慣と見なされているかどうかはわかりません。

IDマングリングに基づいて、ASP.NETを使用していることがわかります。サーバー側の<%= myControl.ClientID %>を使用して、クライアントに送信されたHTMLでレンダリングされるマングルIDを取得できます。

ここでの使用例

   $(function() {     
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').unbind('click');
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').click( function() {

           var cbs = $('table input:checkbox');  

           if($(this).is(':checked')){
               cbs.each(function() { $(this).attr('checked', true); });
           }
           else{
            cbs.each(function() { $(this).attr('checked', false); });
           }

        });
    });

編集：

コメントに応じて、クライアントIDを解決するためのいくつかのオプションがあります。 aspxページでjQueryを記述する場合は、次のように簡単に使用できます。

$('#<%= cbOzelKurumHastasi.ClientID %>')

代わりに

$('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi')

外部スクリプトファイルにjQueryがある場合は、これをaspxページに配置できます

<script type="text/javascript">
var cbOzelKurumHastasi = '#<%= cbOzelKurumHastasi.ClientID %>';
</script>

そして、外部スクリプトファイルで変数を使用します

$(function() {     
            $(cbOzelKurumHastasi).unbind('click');
            $(cbOzelKurumHastasi).click( function() { ...

他のオプションについては、この質問と回答を見てください- jQueryを使用するためにASP.NETがIDを変更しないようにする方法

37
Russ Cam

私は通常、jQueryの.is（）機能を使用してこれを確認します

$('.cbOzelHastaAdi').click( function() {
  if($(this).is(':checked')){
    ...
  }else{
    ...
  }
})
7
Corey Downie

それは、checkedプロパティの値をブール値ではなく文字列と比較し、値とタイプの両方を比較する===演算子を使用しているためでしょうか？

3
Venr

私は同じ問題に出くわしました。チェックボックスが（さまざまな方法で）チェックされているかどうかをチェックすると、常にfalseが返されます。

私の解決策（問題のコース）は、使用されたJQueryセレクターにありました。

uzay95は、クラスセレクター「。」を使用してチェックボックスを選択しました。

$（ '。cbOzelHastaAdi'）**

結果セットを返します。そのため、複数のチェックボックスが存在する可能性があるため、チェックされているかどうかのチェックは無効です...私は彼のコードでthisキーワードを使用していることを知っていますが、私にとってもこれは問題を解決しませんでした。

IDでチェックボックスを選択するとすぐに、その 'checked'属性を評価できます。

1
Wouter Mevius

次の方法が、jQueryでチェック済みのステータスを判別するためのおそらく最良の方法であることがわかりました。

var cbs = $(parentDiv).find('table input:checkbox:checked');

これにより、チェックされた各入力の配列が得られます。

これは主にjQueryドキュメントからです：

セレクター/チェック済み

0
Zhaph - Ben Duguid

これも機能しています：

(($('input[name="myCheckBox"]:checked').val())=='on')

Trueまたはfalseを返します

チェックボックスは次のように定義されています。

<input type="checkbox" name="myCheckBox">
0
user2717833

===はJSのタイプセーフなコンパレータです

参照： https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators

0
user259304

Russ Camの答えは機能しますが、jQueryifyを使ってみませんか？

$(function() {     
    $('.cbOzelHastaAdi').live('click', function() {
        $(this).parents('div').find('table input:checkbox').attr('checked', $(this).attr('checked'));
    });
});

これは、クラスcbOzelHastaAdiがspan要素ではなくチェックボックスにアタッチされていることを前提としています。これにより、面倒なすべてのASP=名前の変更を回避し、複数のクリックイベント関数を必要とせずに、ページごとに複数の同様のテーブルを許可できます。

0
Ben Koehler