htmlフォームのチェックボックスでチェックボックスをオンにした場合とチェックしていない場合のアクションを実行します。

Question

フォームにチェックボックスがありますが、これはデフォルトでは通常チェックされていません。今私はこのチェックボックスのチェックされた状態とチェックされていない状態で2つの分離したアクションを実行したいと思っています。

これは私のチェックボックスです：

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this.id)"/> 
</form> 

、これが私のスクリプトです：

function doalert(id){ 
    if(this.checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
} 

それだけでuncheched警告！それを行う最善の方法は何ですか？

Answer 1

JavaScriptを使用してこれを行うことができます.jQueryは不要です。変更された要素を渡し、JavaScriptがそれを処理できるようにします。

HTML

<form id="myform"> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)"/> 
</form> 

JS

function doalert(checkboxElem) { 
    if (checkboxElem.checked) { 
    alert ("hi"); 
    } else { 
    alert ("bye"); 
    } 
} 

Demo Here

Answer 2

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" /> 
</form> 

JS：

$('#g01-01').on('change',function(){ 
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked'; 
    alert(_val); 
}); 

Answer 3

変更イベントJQueryを使用してみましたか？

$("#g01-01").change(function() { 
    if(this.checked) { 
     //Do stuff 
    } 
}); 

その後、あなたもあなたのチェックボックスからonchange="doalert(this.id)"を削除することができます:)

編集：

あなたがJQueryを使用している場合、私は知らないが、あなたはまだそれを使用していない場合あなたのページに次のスクリプトを置く必要があります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

Answer 4

開発者ツールを使用しているコードでは、thisは入力オブジェクトではなくウィンドウオブジェクトを参照しています。渡されたIDを使用して入力を取得し、checkedの値をチェックすることを検討してください。

function doalert(id){ 
    if(document.getElementById(id).checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
} 

Answer 5

問題は、あなたがリスナーを添付しました方法です：

<input type="checkbox" ... onchange="doalert(this.id)"> 

インラインリスナーが効果的にこのとしての要素で呼び出される関数に包まれています。その関数はdoalert関数を呼び出しますが、そのはに設定されていないので、グローバルオブジェクト（ブラウザのウィンドウ）にデフォルト設定されます。

ウィンドウオブジェクトにチェックされたプロパティがないため、this.checkedは常にfalseに解決されます。

あなたが要素であると doalert 内このをしたい場合は、のaddEventListenerを使用してリスナーを添付：

window.onload = function() { 
    var input = document.querySelector('#g01-01'); 
    if (input) { 
    input.addEventListener('change', doalert, false); 
    } 
} 

それともインラインリスナーを使用したい場合：

<input type="checkbox" ... onchange="doalert.call(this, this.id)">