送信 - onsubmit javascript




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

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

HTML

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

JS

function doalert() {
  if ($("#g01-01").is(":checked")) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

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

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

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




checkbox