如何确定是否已选中复选框？

69

出于某种原因，我的表单不希望获取复选框的值...我不确定这是否是我的编码，但是当我尝试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。怎么了

javascript html checkbox

— 肖恩
source

120

将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>

展开摘要

— 艾莲·埃伯
source

6

您正在尝试读取复选框的值，然后再加载它。该脚本在复选框存在之前运行。页面加载时需要调用脚本：

<body onload="dosomething()">

例：

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

第一次分配作业后，您还缺少分号。

— 杰夫·B
source

javascript不需要分号。

— Joel

5

您可以使用此代码，它可以返回true或false：

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

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

});

展开摘要

— 拉帕列克
source

2

我没有看到jQuery标签，对吗？

— leonheess

如果没有jQuery，则可以在底部尝试其他评论

— rapaelec19年

如果没有#IDSelector元素，则此代码将中断页面，因为$（＃IDSelector'）[0]是未定义的。

— Jeff Wilkerson

1

只要浏览器发现，就会在定义lfckv的行中运行。将其放入文档的开头时，浏览器将尝试在创建lifecheck元素之前查找lifecheck id。您必须将脚本添加到生命检查输入下方，以使代码正常工作。

— 乔尔
source

0

尝试学习jQuery这是从javascript开始的好地方，它确实简化了代码，并帮助将js与html分开。包含来自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);
    });
});

— 沃尔夫
source

33

-1我认为jQuery绝对不是开始学习JS的好地方。

— 李

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中添加事件后，通过复选框影响动态事件。

谢谢

— 拉帕列克
source

-2

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


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

展开摘要

谢谢

— 拉帕列克
source

这行得通，但是您可以帮助解释为什么需要索引[0]吗？

— edc

1

当您按类获取元素时，返回元素必须是一个数组，因为同一类可以包含许多元素，因此对第二个建议感到抱歉，它必须document.getElementById（“ IdOfCheckBox”）。checked

— rapaelec

1

是的，但是您没有使用类来获取元素，而是使用了ID，因此您不必使用[0]，这会产生错误

— Midz Elwekil

-2

如果选中复选框，则以下将返回true；否则，则返回false。

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

将$（this）替换为要检查的变量。

并用于以下条件：

if ($(this).is(":checked")) {
  // do something
}

— Flavio Caduff
source

此答案需要jquery，因此无法回答问题

— Jeff Wilkerson

-3

<!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>

— 高塔姆·维拉迪亚（Gautam Viradiya）
source

4

OP还没有提到jquery？

— atmd 2015年