简体   繁体   English

如何确定复选框是否被选中?

[英]How do I determine if a checkbox is checked?

For some reason, my form does not want to get the value of a checkbox... I am not sure if it is my coding or not, but when I try and alert() the value, I get undefined as a result.出于某种原因,我的表单不想获取复选框的值......我不确定它是否是我的编码,但是当我尝试alert()该值时,结果是undefined的。 What do I have wrong?我有什么问题?

<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编辑

I tried changing it to this我试着把它改成这个

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

But now it doesn't even want to execute .但是现在它甚至不想execute What's going wrong?出了什么问题?

Place the var lfckv inside the function. var lfckv放在函数内部。 When that line is executed, the body isn't parsed yet and the element "lifecheck" doesn't exist. 执行该行时,尚未解析正文,并且元素"lifecheck"不存在。 This works perfectly fine: 这非常好用:

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

You are trying to read the value of your checkbox before it is loaded. 您正在尝试在加载之前读取复选框的值。 The script runs before the checkbox exists. 该脚本在复选框存在之前运行。 You need to call your script when the page loads: 您需要在页面加载时调用脚本:

<body onload="dosomething()">

Example: 例:

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

You are also missing a semi-colon after your first assignment. 在第一次分配后,您也错过了分号。

You can use this code, it can return true or false : 你可以使用这段代码,它可以返回truefalse

 $(document).ready(function(){ //add selector of your checkbox var status=$('#IdSelector')[0].checked; console.log(status); }); 

The line where you define lfckv is run whenever the browser finds it. 只要浏览器找到,就会运行定义lfckv的行。 When you put it into the head of your document, the browser tries to find lifecheck id before the lifecheck element is created. 当您将其放入文档的头部时,浏览器会在创建lifecheck元素之前尝试查找lifecheck id。 You must add your script below the lifecheck input in order for your code to work. 您必须在lifecheck输入下面添加脚本才能使代码正常工作。

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

so after you can add event in javascript to have dynamical event affected with the checkbox . 因此,您可以在javascript中添加事件,以使动态事件受到复选框的影响。

thanks 谢谢

try learning jQuery it's a great place to start with javascript and it really simplifies your code and help separate your js from your html. 尝试学习jQuery这是一个开始使用javascript的好地方,它真正简化了你的代码并帮助你将你的js与你的html分开。 include the js file from google's CDN (https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js) 包含谷歌CDN的js文件(https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js)

then in your script tag (still in the <head> ) use: 然后在你的脚本标签中(仍然在<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);
    });
});

You could try the below to determine checkbox is checked or not.您可以尝试以下方法来确定复选框是否被选中。

$('#checkbox_id').is(":checked"); // jQuery

document.getElementById("checkbox_id").checked //JavaScript

this returns true if checkbox is checked如果选中复选框,则返回true

 var elementCheckBox = document.getElementById("IdOfCheckBox"); elementCheckBox[0].checked //return true if checked and false if not checked 

thanks 谢谢

Following will return true when checkbox is checked and false when not. 选中复选框后,将返回true,否则返回false。

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

Replace $(this) with the variable you want to check. 将$(this)替换为您要检查的变量。

And used in a condition: 并用于以下条件:

if ($(this).is(":checked")) {
  // do something
}
<!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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM