web-dev-qa-db-ja.com

チェックボックスがオンになっているかどうかを確認するにはどうすればよいですか？

何らかの理由で、私のフォームはチェックボックスの値を取得したくありません...それが自分のコーディングであるかどうかはわかりませんが、値を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>

編集

これに変えてみた

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

しかし、今ではexecuteでさえも望んでいません。何が悪いの？

javascripthtmlcheckbox
57
Sean

var lfckvを関数内に配置します。その行が実行されるとき、本文はまだ解析されておらず、要素"lifecheck"は存在しません。これは完璧に機能します：

function exefunction() {
  var lfckv = document.getElementById("lifecheck").checked;
  alert(lfckv);
}
<label><input id="lifecheck" type="checkbox" >Lives</label>
<button onclick="exefunction()">Check value</button>
98
Elian Ebbing

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

<body onload="dosomething()">

例：

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

また、最初の割り当て後にセミコロンが欠落しています。

5
Jeff B

このコードを使用して、trueまたはfalseを返すことができます。

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

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

});
4
rapaelec

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

1
Joel

学習してみてください jQuery これはjavascriptから始めるのに最適な場所であり、コードを本当に単純化し、htmlからjsを分離するのに役立ちます。 GoogleのCDNからjsファイルを含めます（https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.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);
    });
});
1
Walf

以下は、チェックボックスがチェックされている場合はtrue、チェックされていない場合はfalseを返します。

$(this).is(":checked")

$（this）を確認する変数に置き換えます。

条件で使用されます：

if ($(this).is(":checked")) {
  // do something
}
0
Flavio Caduff
<!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にイベントを追加して、動的イベントにチェックボックスを適用させることができます。

ありがとう

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


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

ありがとう

0
rapaelec