javascript 送信 HTMLフォームでチェックボックスがオンまたはオフのイベントに対してアクションを実行する




onsubmit javascript (5)

いつものようにデフォルトでチェックされていないフォームのチェックボックスがあります。 今、私はこのチェックボックスのチェックされた状態とチェックされていない状態に対して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');
  }
}

それは未チェックのアラートです! 最善の方法は何ですか。


JQuery changeイベントを使ってみましたか?

$("#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>

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");
  }
}

デモはこちら


問題は、リスナーをどのように添付したかです。

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

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

ウィンドウオブジェクトにはcheckedプロパティがないので、 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)">

<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);
});

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

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






checkbox