チェックボックスのチェックでjquery関数をトリガすることができない

Question

フォームを作成しましたが、単一のチェックボックスをクリックしたときに関数をトリガしようとしましたが、以下のように使用している関数は機能しません。基本的に私がこの質問に関連して見つけることができるすべての反応は、私が知ることから使用しているのと同じ方法を使用することを指していますが、私はここで間違ったことをしているに違いありません。

<form> 
    <fieldset> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/> 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
     </div> 
     </div> 
    </div> 
    </fieldset> 
</form> 

<script> 
jQuery(document).ready(function($){ 
    if ($('#filter-3dAnimationVisualEffects').is(':checked')) { 
    alert("Checked!"); 
    } 
}); 
</script> 

チェックボックスをオンにしたときにこの機能を実行するにはどうすればよいですか？

Answer 1

あなたは次のように.on()を使用して、クリックイベントのイベントハンドラ関数を添付する必要があります。

jQuery(document).ready(function($){ 
 
    $('#filter-3dAnimationVisualEffects').on('click', function(){ 
 
    alert($(this).is(':checked')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/> 
 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</form>

Answer 2

フォームとjQuery関数作業罰金が、あなたのコードのロジックは、実際にどのように動作するかで誤解があります：

if ($('#filter-3dAnimationVisualEffects').is(':checked')) { 
    alert("Checked!"); 
} 

この条件は、チェックボックスが既にチェックされている場合のみ有効ですこのjQuery関数を実行する前にedを呼び出します。

あなたがチェックし、それをオフにしようとした場合、それはあなたが

を期待どおりにチェックボックスがオンまたはオフされたときにアクションを実行するには、クリックイベントのコールバック関数を追加する必要があります動作しません。

$('#filter-3dAnimationVisualEffects').on('click', function(){ 
    if ($(this).is(':checked')) { 
     alert("Checked!"); 
    } 
}); 

Answer 3

これを試してください。このチェックボックスをオフにすると、イベントをトリガーすることもできます。

$(document).ready(function() { 
 
    $('#filter-3dAnimationVisualEffects').on('change', function() { 
 
    if ($(this).is(':checked')) 
 
     alert('checked'); 
 
    else 
 
     alert('not checked'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox" /> 
 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</form>