入力タイプのチェックボックスで予期しないjavascriptの動作

Question

タイプチェックボックスの入力であるmy asp.net core 2.0/mvc6プロジェクトに要素があります。私はちょうどこのチェックボックスをトグルしながら別の隠し要素の値を変更する方法をテストしていたので、それを動作させることができませんでしたので、クリック結果が何であるかを確認するために表示される単純なjqueryを使用しました。

Htmlの

<div class="col-xs-7 col-sm-8"> 
    <label class="css-input switch switch-sm switch-success"> 
      <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms 
    </label> 
</div> 
<div class="col-xs-5 col-sm-4"> 
    <div class="font-s13 text-right push-5-t"> 
     <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a> 
     </div> 
</div> 
@Html.HiddenFor(m =>m.Terms, new { id="register-terms" }) 

Javascriptを

$用語要素

var $terms = $("#validation-terms"); 
//toggle the slider when terms modal agree button clicked 
     $terms.on('click', function() { 

      if ($terms.is(':checked')) { 
       //$terms.prop('checked', false); 
       //$('#register-terms').val(false); 
       alert("changing to blank"); 
      } else { 
       //$terms.prop('checked', true); 
       //$('#register-terms').val(true); 
       alert("changing to green"); 
      } 

     }); 

呼び出したいものは何でも未確認のスライダー（空白、グレー表示でページがロード、ための変数でありますそれはチェックされた属性を追加しない限り通常の動作です）。 チェックボックス（スライダ）をクリックすると、javascriptで検出されないことが確認され、緑色のメッセージに変わることが示されます。その動作は反対です！最初にクリックすると空白に変わるメッセージが表示され、スライダが緑色に変わり、もう一度クリックするとチェック状態（おそらく）になり、緑色のメッセージに変わり、空白に戻ります。

私はここで何が欠けていますか？

Answer 1

$ termsが初期化されたコードを含めなかったので、$ terms変数が正しく使用されているかどうかはわかりませんが、click関数の中の "this"への参照を使用すると、チェックボックスがクリックされます。問題の理解に役立つかどうかは、下のスニペットを参照してください。あなたが提供したコードに応じて私のために正しいアラートを表示しているようだ：ここで

$(function(){ 
 
    //toggle the slider when terms modal agree button clicked 
 
    $terms = $("#validation-terms"); 
 
    $terms.change(function() { 
 
     //If the current click if checking the box: 
 
     if ($(this).is(':checked')) { 
 
      //$terms.prop('checked', false); 
 
      //$('#register-terms').val(false); 
 
      alert("Checking the checkbox"); 
 
     } else { //If the current click is un-checking the box: 
 
      //$terms.prop('checked', true); 
 
      //$('#register-terms').val(true); 
 
      alert("Unchecking the checkbox"); 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-7 col-sm-8"> 
 
    <label class="css-input switch switch-sm switch-success"> 
 
      <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms 
 
    </label> 
 
</div> 
 
<div class="col-xs-5 col-sm-4"> 
 
    <div class="font-s13 text-right push-5-t"> 
 
     <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a> 
 
     </div> 
 
</div> 
 
<input type="hidden" id="register-terms" >

は、チェックボックスでどのように機能するかを変更またはイベントをクリックし、基本的である：

$('#checkbox1').change(function() { 
    if($(this).is(":checked")) { 
     //'checked' event code 
    } 
    else { 
     //'unchecked' event code 
    } 
});