2011-01-21 7 views
40

何らかの理由で、私のフォームはチェックボックスの値を取得したくない...私はそれが自分のコーディングであるかどうかわからないが、alert()の値を試してみると、undefinedという結果になる。何が間違っていますか?チェックボックスがオンになっているかどうかを確認するにはどうすればよいですか?

<head> 
    <script> 
    var lfckv = document.getElementById("lifecheck").checked 
    function exefunction(){ 
     alert(lfckv); 
    } 
    </script> 
</head> 
<body> 
    <label><input id="lifecheck" type="checkbox" >Lives</label> 
</body> 

EDIT

私はこの

function exefunction() { 
    alert(document.getElementById("lifecheck").checked); 
} 

にそれを変更しようとした。しかし、今それもexecuteに望んでいません。何がうまくいかないの?

答えて

78

var lfckvを機能内に配置します。その行が実行されると、ボディはまだ解析されず、要素"lifecheck"は存在しません。これは完全にうまく動作します:

<html> 
    <head> 
     <script language="javascript" type="text/javascript"> 
      function exefunction(){ 
       var lfckv = document.getElementById("lifecheck").checked; 
       alert(lfckv); 
      } 
     </script> 
    </head> 
    <body> 
     <label><input id="lifecheck" type="checkbox" >Lives</label> 
     <button onclick="exefunction()">Check value</button> 
    </body> 
</html> 
5

チェックボックスが読み込まれる前に値を読み取ろうとしています。スクリプトは、チェックボックスが存在する前に実行されます。あなたは、ページのロード時にスクリプトを呼び出す必要があります:

<body onload="dosomething()">

例:

http://jsfiddle.net/jtbowden/6dx6A/

また、あなたの最初の代入の後にセミコロンが欠落しています。

+0

セミコロンはJavaScriptが必要ありません。 – Joel

+9

まだ良い習慣です。 –

1

lfckvを定義する行は、ブラウザが見つけたときに実行されます。ドキュメントの先頭に置くと、ブラウザはlifecheck要素が作成される前にlifecheck idを見つけようとします。コードが機能するためには、ライフチェック入力の下にスクリプトを追加する必要があります。

1

try learning jQueryこれはjavascriptで始めるのに最適な場所で、コードを単純化してjsとhtmlを分けるのに役立ちます。 googleのCDN(https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js)のjsファイルを含めて

あなたのスクリプトタグ(まだ<head>)で:

$(function() {//code inside this function will run when the document is ready 
    alert($('#lifecheck').is(':checked')); 

    $('#lifecheck').change(function() {//do something when the user clicks the box 
     alert(this.checked); 
    }); 
}); 
+25

-1 jQueryはJSの学習を始めるにはあまりいい場所ではないと思います。 – Lee

+4

あなたは何について話していますか?他のライブラリやフレームワークを調べる前にJavascriptに慣れておくべきだと述べただけです。これはレイヤーの分離と何が関係していますか? – Lee

+1

@Lee Context、Lee。コンテキスト。あなたは "解決策"を見ましたか?読書は私を90年代にまっすぐに戻します。明らかにOPはイベントをよく理解していなかったので、JavaScriptは非常にイベントベースであり、jQueryはあなたにそれらを理解させるのに非常に優れています。 jQueryの学習を開始するには、JavaScriptをマスターする必要はありません。 jQueryで始まらないことを除いて、単に「何かを述べる」ことはありませんでした。建設的であることを試みなさい、それはdownvotesのためではない。 – Walf

-1
<!DOCTYPE html> 
<html> 
<body> 
    <input type="checkbox" id="isSelected"/> 
    <div id="myDiv" style="display:none">Is Checked</div> 
</body> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script> 
     $('#isSelected').click(function() { 
      $("#myDiv").toggle(this.checked); 
     }); 
    </script> 
</html> 
+2

OPはjqueryについて言及していませんか? – atmd

+0

こんにちはatmd、今私は完全なコードを追加しています。 –

2

あなたはこのコードを使用することができ、それはtrueまたはfalseを返すことができます。

$(document).ready(fonction(){ 
 
    
 
    //add selector of your checkbox 
 

 
    var status=$('#IdSelector')[0].checked; 
 
    
 
    console.lot(status); 
 

 
});

-1

var elementCheckBox = document.getElementById("IdOfCheckBox"); 
 

 

 
elementCheckBox[0].checked //return true if checked and false if not checked

おかげ

0

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 
<label><input class="lifecheck" id="lifecheck" type="checkbox" checked >Lives</label> 
 

 
<script type="application/javascript" > 
 
    lfckv = document.getElementsByClassName("lifecheck"); 
 
    if (true === lfckv[0].checked) { 
 
     alert('the checkbox is checked'); 
 
    } 
 
</script> 
 
</body> 
 
</html>

ので、チェックボックスに影響を受けた動的イベントを持つようにJavaScriptでイベントを追加することができた後。

おかげ

関連する問題