チェックボックスがオンまたはオフの場合、チェックボックスの親要素のCSSを変更する

StackOverflow https://stackoverflow.com/questions/1808198

質問

基本的に、td要素内にチェックボックスがあり、チェックボックスがチェックされているときは1つの背景色を、チェックボックスがオフのときは別の背景色を使用します。つまり、チェックされているかどうかを強調したいのです。

ここと同じソリューションを使用しようとしました： Jqueryトグルイベントがチェックボックスの値に干渉している

しかし、何らかの理由で動作しません。

    $(document).ready(function(){
    $("input:checkbox").change(function() {
        if($(this).attr("checked") === "true") {
            // CHECKED, TO WHITE
            $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
            return;
        }
        //NOT CHECKED, TO GREEN
        $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
    });
});

緑色の背景色を追加しますが、削除しません。また、チェックボックスをオンのままにして更新すると、tdは白に戻り、チェックボックスを再度クリックしてオフにすると、tdの背景が緑に変わります。

私はまだこれに慣れていないので、ここで何が間違っているのかわかりません。このような単純なことですが、機能させることはできません。

役に立ちましたか？

解決

変更

if($(this).attr("checked") === "true")

to 

if($(this).attr("checked") === true)

strict equalを使用して比較する場合、2つのデータ型は同じでなければなりません。

typeof ( $(this).attr ( "checked" ) )

boolean タイプであり、文字列と比較していることを通知します。

詳細については、比較演算子

を参照してください。

他のヒント

チェックボックスがチェックされているかどうかを確認するより良い方法があります：

$(this).is(':checked')

もう少し堅牢です。

  

if（$（this）.attr（＆quot; checked＆quot;）===＆quot; true＆quot;）

attr はHTML属性を読み取りません。そのように欺く。属性を読み取った場合、 checked の文字列値は 'true' ではなく、 'checked' になります。しかし、それはしません。

実際に行われるのは、JavaScriptオブジェクトのプロパティを読み取ることで、プロパティ名ではなく属性名のみを使用して、それらが異なるいくつかの場所で使用します。 checked プロパティはブール値を提供するため、何かと比較する必要はなく、次のように言うことができます。

if ($(this).attr('checked'))

またはさらに単純な、完全に同等の：

if (this.checked)

最高のものは

if($("this").is(':checked'))
 {
   $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
 }

=、==、==の違いについては、この記事をご覧ください。 = javascriptで。または、jsの等価演算子のこれ。

これを変更してみてください：

$(this).attr("checked") === "true"

これ：

!!$(this).attr("checked") === true

これにより、ブール値以外の値がブール値に変換され、文字列＆quot; true＆quot;が返されます（文字列falseが返された場合、trueと評価されますが...）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top