web-dev-qa-db-ja.com

jQuery .prop（ 'checked'、false）が機能しない

HTML：

_<form class="form">
    <input type="checkbox" id="box" /> Check Me!
</form>
_

JS：

_$(window).load(function() {
    var myFunc = function() {
        if($('#box').prop('checked', false)) {
            $('.form').append('<p>Checkbox is not checked.</p>');
        }
    }

    $('#box').on('change', myFunc);
});
_

これがJSFiddleです http://jsfiddle.net/3PYm7/

ifステートメントの条件として$('#box').prop('checked', false)を使用すると、機能しませんが、! $('#box').prop('checked')は問題なく機能します。

javascriptjqueryhtmlprop
5
Mahmoud Saeed

ステートメント$('#box').prop('checked', false)はブール値を返さず、checkedプロパティをfalseに設定するため、条件で使用しないでください。通常の動作です。

_if($('#box').prop('checked', false))
_

is()と_:checked_セレクターを使用してテストするように変更できます。

_if($('#box').is(':checked'))
_

または

_if($('#box:checked').length)
_

ネイティブJavaScriptを使用して最高のパフォーマンスを得る

_if(document.getElementById('box').checked)
_

あなたが言及した作業ステートメント$('#box').prop('checked')は、設定ではなく、チェックされたプロパティ値を返します。

21
Adil
  if ($('#box').prop('checked')==false) {
      $('.form').append('<p>Checkbox is not checked.</p>');
  }
4
Amarnath R Shenoy

ええ、それは既知のものです、

$('#box').prop('checked', false)はセッターバージョンであり、ブール結果ではなく、.prop()メソッドが呼び出された要素を返します。ブール値$('#box').prop('checked')を取得するには、代わりにゲッターバージョンを使用する必要があります。

.prop(property) について詳しくは、こちらをお読みください

2
Rajaprabhu Aravindasamy

これを試して

if($('#box').is(':checked')) // this will return true or false
2
Sridhar R

ブール値を返さないセッター を使用してプロパティをテストするよりも多くの問題があります。

コードが修正されると、チェックを外すたびにメッセージが追加されます。

私はこれを提案します

Live Demo

$(function() {
   $('#myform').on("submit", function(e) {
     var checked = $('#box').is(":checked");
     $('#pleaseCheckBoxMessage').toggle(!checked);
     if (!checked) {
       e.preventDefault(); // stop submission
     }
  });
  $("#box").on("click",function() {
    $('#pleaseCheckBoxMessage').toggle(!this.checked);
  });  
});
2
mplungjan

これはjQueryの一般的な問題であり、jQueryを介して値を取得および設定するために同じ関数名を使用するという考えでしたが、これは初心者にとって非常に混乱します。

たとえば、.val（ 'bla'）は値blaを設定しますが、.val（）は現在の値を返します...これはattr、prop、...についてもほぼ同じであり、誰かがしなかったため、それぞれにStackOverflowの質問がありますそれがどのように機能するはずだったかを理解してください。 getProp、setPropと呼ばれていれば、これらの問題は存在しませんでした。

0
Christophe Roussy

このようにしてみてください。これはチェックする別の方法でもあります。

_if (!$('#box').prop('checked')) {
        $('.form').append('<p>Checkbox is not checked.</p>');
    }
_

更新されたデモ

$('#box').prop('checked')チェックボックスを変更するとtrueまたはfalseが返されます

0
Balachandran