jQueryの記述についての質問です。違いを教えていただきたいです。

javascript
1            if($(this).is(':checked')){
2                alert('チェックされています');
3            }else{
4                alert('チェックされていません');
5            }

という記述の仕方をすると、チェックボックスのチェック判定がうまくいくのですが

javascript
1        $checkbox.click(function(){
2            if($(this).is('checked')){
3                alert('チェックされています');
4            }else{
5                alert('チェックされていません');
6            }

という記述の仕方をすると、常にチェックされていない状態として判定されてしまいます。

そこで質問なのですが、この　:　という記号にはいったいどのような意味があるのでしょうか。

また

javascript
1        $checkbox.click(function(){
2            if($(this).prop('checked')){
3                alert('チェックされています');
4            }else{
5                alert('チェックされていません');
6            }

と、isの部分をpropにしても、うまくいきませんでした（常にチェックされていない状態として判定されてしまいます）

この場合、isはどのような意味で
propはどのような意味なのでしょうか？
また、その違いを教えていただけませんでしょうか。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

そこで質問なのですが、この　:　という記号にはいったいどのような意味があるのでしょうか。

先頭にコロンを付けて、その後ろに疑似クラスの名称を記述することで擬似クラスとして動作させることが可能になります。

isの部分をpropにしても、うまくいきませんでした（常にチェックされていない状態として判定されてしまいます）

うまくいくように思うのですが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<input type="checkbox" id="checkbox1">
9<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10<script>
11    $checkbox = $("#checkbox1");
12    $checkbox.click(function () {
13        if ($(this).prop('checked')) {
14            alert('チェックされています');
15        } else {
16            alert('チェックされていません');
17        }
18    });
19</script>
20</body>
21</html>

propはどのような意味なのでしょうか？

propメソッドは、引数にプロパティ名を指定することで、指定した要素のプロパティの値を取得することができます。
isメソッドは、指定した要素がisメソッドの引数に指定したセレクタとマッチしたときにtrueを、そうでなければfalseを返します。

投稿2017/10/22 11:53

s8_chu

総合スコア14731

tathibana_sidan

2017/10/22 14:36

ありがとうございます。疑似クラスについては初めて知りました。 1番目のプログラムコードは if($(this).is(':checked')) thisの状態がcheckedの状態にあるなら、trueを返し、そうではないならfalseを返すのでうまくいった。 2番目のコードは「checkedの状態にあるなら」の記述の部分がうまく記述できていなかったのでうまくいかなかった。 3番目のコードは、理解できていない部分があるので、申し訳ありませんが、追加で質問させていただきます。 if ($(this).prop('checked')) prop('checked')でチェックされているかどうかという状態を取得してくるのであるならば、このif文はただ状態を取得しているだけではないのですか？＝＝　などで、比較しなくてもよいのはなぜでしょうか？丁寧に解説くださっているのに、理解力がなくて申し訳ありません。ご教授いただけますでしょうか。