1

私はかなり奇妙な行動に出くわしました。2つのページがあり（ページAとページBと呼びます）、両方のページに次のJavaScriptコードが含まれています。

<script type="text/javascript">
$(document).ready(function(){
    $('a > img.id-provider, #signup-button').click(function(e){
        if (!$('#chk-agree').attr('checked')) {
            alert('Please accept our terms and conditions before continuing');
        }
        else {
            alert('ok');
        }
        e.preventDefault();
    });
});
</script>

このページはここで表示できます：http：//jsfiddle.net/SrRAS/

Bページでは、動作は期待どおりです。つまり、サインアップボタンがクリックされる前にチェックボックスがチェックされていない場合、警告が発行されます。

ただし、Aページでは、チェックボックスを手動でクリックしてチェックした場合でも、警告が常に表示されます。

何が起こっているのかを理解しようとしたときのFFコンソール出力（両方のページ）は次のとおりです。

>>> $('#chk-agree').attr('checked')
undefined
>>> $('input#chk-agree').attr('checked')
undefined

最終的に、ページAで、チェックされた属性をプログラムで設定することにしました（通常のユーザーのように手動でクリックするのではなく）。

>>> $("input#chk-agree").click()
jQuery(input#chk-agree, input#chk-agree)
>>> $("input#chk-agree").attr('checked')
"checked"

次に、 Aページのサインアップボタンをクリックすると、期待どおりに機能しました（「ok」メッセージが表示されました）。ただし、 Aページのチェックボックスを手動でオフにした場合でも、「ok」メッセージが表示され続けました。したがって、何らかの理由で、ページAで、チェックボックスを手動でクリックしても、「チェック済み」属性は切り替えられないようです。

2つの質問があります：

  1. チェックボックス'checked'属性を切り替えずにチェックボックスを手動でチェックするのはなぜですか
  2. あるページでコードが期待どおりに機能し、別のページでは機能しない原因は何ですか？

[[編集]]

I have also tried the following check instead of the one shown in my snippet above:

if (!$(this).is(':checked')/*!$('#chk-agree').attr('checked')*/) {
   ...
}else {
   ...
}

さて、少なくとも動作は両方のページで一貫しており、チェックボックスを手動でクリックしたときにどのページ（AまたはB）も認識していないようです-一体何が起こっているのでしょうか？！

[[編集2]]

動作していないページのマークアップはここにあります：http：//jsfiddle.net/SrRAS/

このページで機能しない原因を突き止めることに非常に興味があります。

4

6 に答える 6

2

固定コードを使用してこのバージョンのJsFiddleを確認してください。2つの変更が含まれています。一意のIDを持つチェックボックスとチェックされた要素の正しいjqueryコード

if ($('input#chk-agree').is(':checked')) {
        alert('ok');
    }
    else {
        alert('Please accept our terms and conditions before continuing');
    }
于 2013-01-26T23:19:32.730 に答える
1

chk-agreeIDの重複が原因のようです。これはコピー/貼り付けエラーだったのではないかと思います。最初のchk-agreeチェックボックスは「RememberMe」機能の一部として使用されています。

この重複の結果、はに$('input#chk-agree').attr('checked')評価されますがundefined、これはJavascriptでは誤りです。

ここでの解決策は、2つのチェックボックスの1つを別のIDに変更することです。たとえば、最初のチェックボックス（jsFiddleの70行目）の名前をに変更すると、問題なくchk-remember-me動作し、「OK」メッセージが表示されます。

于 2013-01-26T07:43:22.330 に答える
0

あなたのマークアップを見なくても、AページとBページの間に少し違いがあるはずだと私は確信しています。ファイルをバックアップして、AのマークアップをBのマークアップに置き換えてみましたか？2つの別々のHTMLページでまったく同じコードが異なる動作をするという正当な理由はありません。

私にとって、このマークアップ：

<input type="checkbox" id="testbox"  value="check me"/> 
<input type="button" id="testbutton" value="click me" />

そしてこのjs：

$("#testbutton").click(function() {
    if ($("#testbox").attr("checked")) {
        alert("Checked");
    }
    else {
        alert("Not Checked");
    }
});

私が試したすべてのブラウザで問題なく動作します。また、どのバージョンのjQueryを使用していますか？

于 2013-01-20T11:11:08.697 に答える
0

これを試してください：http：//jsfiddle.net/Gsxfz/

 $('#signup-button').click(function (e) { <-- its an '<a>'
   if (!$('#chk-agree:checked').length) {// <--check for the length of checked checkboxes
     alert('Please accept our terms and conditions before continuing');
   } else {
     alert('ok');
   }
    e.preventDefault();
});

あなたはフィドルをチェックアウトすることができますhttp://jsfiddle.net/Gsxfz/

于 2013-01-20T11:12:09.540 に答える
0

次の変更を行うだけです

ページA

 <input type="checkbox" id="chk-agree-pageA"> // checkbox ID

 <button type="submit" class="btn btn-success signup" id="pageA">Sign In</button>

ページB

<input type="checkbox" id="chk-agree-pageB"> // checkbox ID

 <button type="submit" class="btn btn-success signup" id="pageB">Sign In</button>

最後にスクリプト

$('button.signup').click(function(){
        var id = $(this).attr('id');
        if ($('input#chk-agree-'+id).is(':checked')) {
           alert('ok');
        }
        else {
            alert('Please accept our terms and conditions before continuing');

        }
    });    
});

このフィドルを確認してくださいhttp://jsfiddle.net/SrRAS/25/

于 2013-01-30T13:11:00.240 に答える
0 
// this will alert you that you have duplicate ids on the page

if($('input#chk-agree').size()>1) {
    alert('you have duplicate ids on this page');
}


// this will fix your problem in jsfiddle:

if (!$('input#chk-agree')[1].checked) {

    alert('Please accept our terms and conditions before continuing');
}
else {
        alert('ok');
}

// but removing the first duplicate id is the right fix :-)
于 2013-01-30T22:08:17.433 に答える