javascriptのチェックボックスの基本

私は単にボックスをチェックした結果の警告を取得しようとしています。私はチェックイベントを隔離しているようには見えません。最初にfalseにチェックプロパティを設定しようとしても、ページイベントをロードすると起動します。javascriptのチェックボックスの基本

私はjqueryとそのすべてのものを持っていますが、javascriptで私の正式な訓練のために私はjavascriptに固執し、これを最初に取得する必要があります（jqueryは私の次のコースになる）。それはところでウィキバーシティからのjavascriptの挑戦だ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
    <title>JavaScript Challenges</title> 
    <script type="text/javascript"> 
    window.onload = function(){ 
    checkbox = document.getElementById("subscribe"); 
checkbox.checked = false; 


if (checkbox.checked = true){ 
    alert("checked works"); 
    } 

} 

    </script> 
    </head> 
    <body> 
    <form action=""> 
     <fieldset> 

     <legend>Email subscriptions</legend> 

     <p id="subscribepara"> 
      <label> 
      <input type="checkbox" name="subscribe" id="subscribe"> 
      Yes! I would like to receive the occasional newsletter via email. 
      </label> 
     </p> 

     <p id="emailpara"> 
      <label> 
      Email Address: 
      <input type="text" name="email" id="email"> 
      </label> 
     </p> 

     </fieldset> 
    </form> 
    </body> 
</html>

：

はここのコードです。最初のチャレンジの2番目の部分。あなたが必要とする最初の部分style.display = 'none'で電子メール要素を非表示にしてもうまくいきました。

出典

2011-02-08 Immers

比較演算子が壊れているので、それは焼成ているように見えます：

if (checkbox.checked = true)

は、あなたが持っているバージョンは、本質的にtrueにチェック状態を設定している

if (checkbox.checked == true)

でなければなりません。この操作は成功したため、それ自体が真となり（条件付きでアラートが表示されます）。

さらに、チェックボックスを手動でオンまたはオフにすると、このコードは起動しません。これは、ページが読み込まれるときに1回だけ実行されます。クリックイベントにバインドする方法の1つは、チェックボックスの場合はspecify a function call in the markupです。

マークアップではなく、コードを分離してイベントに外部的にバインドする方がよいと考えられます。しかし、jQueryに入ると、そのことに気づくでしょう。基本から始めるのがいいです。

出典

2011-02-08 12:21:37 David

'if（checkbox.checked）'もOKでしょうか？ – erickb

@erickb：する必要があります。 JavaScriptは、（私のような）静的に型付けされた背景から来る人にプリミティブ型では少し変ですが、うまくいくはずです。 – David

あなたは、イベントがチェックボックスをチェックした後にトリガしたい場合は、window.onloadにバインドするべきではありませんが、チェックボックスのonchangeイベント：

<script> 
    var checkbox = document.getElementById('subscribe'); 
    checkbox.onchange = function() { 
     if (checkbox.checked = true){ 
      alert("checked works"); 
     } 
    } 
</script>

onchangeイベントが機能しないことに注意してください他のブラウザと同じようにInternet Explorerのために。これは全く別の話題なので、詳しい情報が必要な場合はthis questionをご覧ください。

上記の関数は実際の入力要素の下に定義する必要があります。このサンプルを<head>に含めると、IDがsubscribeの要素が存在することがまだ分かりません。JavaScriptは失敗します。 もっと便利な方法は、DOMロード後にイベントハンドラをバインドすることです（）が、簡潔にするために、詳細を知りたい場合は、この件に関するSOまたはGoogleを検索することをおすすめします:)

出典

2011-02-08 12:22:33

あなたのアプローチは多少オフになっています - 重要なのは、あなたは実際にイベントをキャッチしているわけではありません。現在、ページにがロードされると、チェックボックスのチェック状態が表示され、アラートが表示される可能性があります。要件の私の理解は、チェックボックスがが変更されたときに警告をポップアップし、をチェックすることです。

（デビッドが指摘したように、チェックを実行すると誤ってティックボックスが実際にチェックされています。）

代わりに、チェックボックスのonchangeイベントのリスナーを登録すると、チェックボックスが変更されるたびに何らかのコードが実行されます。をに学びたいと思うように聞こえるので、正確なコードを書くのではなく、そのまま残しておきます。このintroduction to event handlersを見てみましょう。あなたが何かと何かについてもっと深く読んでみたいのであれば（この特定のケースで必要となるよりはるかに関わっていることに注意してください）。

出典

2011-02-08 12:24:11

リンクありがとう！記事は非常に素人から始まりましたが、非常に混乱しました。私はいくつかの例に頭を下げる必要があると思います。 – Immers

チェックボックスをオンにして関数を呼び出すには、チェックボックスにイベントリスナーを追加する必要があります。ここでそれを行う方法は次のとおりです。

// you have to do it inside the window.onload function so you know the DOM is available 
window.onload = function(){ 
var checkbox = document.getElementById("subscribe"); 
checkbox.onchange = function(){ 
    if(checkbox.checked == true){ 
    alert('checked!'); 
    } 
}; 
};

「のonchange」プロパティがチェックボックスのチェックを外すとヴィーカその逆に確認から変更状態であるたびに呼び出される関数に設定されています。その機能の中で、チェックされた値をチェックし、必要に応じてアラートを起動します。

希望に役立ちます！

出典

2011-02-08 12:24:35 Shakakai

はい、それは多くの助けになりました！ありがとう！ – Immers

comparisonを確認してください。checkbox.checked = trueは割り当てです。 Research onClick event

これは基本的に宿題なので、私は作業コードを投稿していません。あなたは近くにいて、もう少し読んだら、それを手に入れます。

出典

2011-02-08 12:27:24 Chuck

関数を使用して、onclickイベントでトリガすることができます。この方法で他のチェックボックスでも再利用できます。

# js 
function alert_on_checked(elementId) { 
    var checkbox = document.getElementById(elementId); 
    if(checkbox.checked) { 
    alert('checked works!'); 
    } 
} 

# html 
... 
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" > 
...

出典

2011-02-08 12:36:47 erickb

興味深い。私はHTML要素にイベントハンドラを置くことで何ができるのだろうと思います。私のコースは、要素をスクリプトに置くようなものがどのように侵略的であるかを叫ぶのを止めることができません。 – Immers

javascriptのチェックボックスの基本

答えて

関連する問題