web-dev-qa-db-ja.com

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

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

それはただ警告されていない!!それを行う最良の方法は何ですか。

javascripthtmlcheckbox
14
shekoufeh

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

ここでデモ

36
Shrinivas Pai
<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);
});
3
guvenckardas

問題は、リスナーのアタッチ方法です。

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

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

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

this within 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)">
2
RobG

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>
_
1
Reece Kenney

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

開発者ツールを使用してコードをデバッグすると、thisが入力コントロールではなくウィンドウオブジェクトを参照していることに気付くでしょう。渡されたIDを使用して入力を取得し、checked値を確認することを検討してください。

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