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

由于某种原因，我的表单不想得到一个复选框的值... ... 我不确定这是否是我的编码，但是当我尝试和 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了，出什么问题了？

397286 次浏览
小开

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/

You are also missing a semi-colon after your first assignment.

小开
最佳答案

Place the var lfckv inside the function. When that line is executed, the body isn't parsed yet and the element "lifecheck" doesn't exist. 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>

小开

The line where you define lfckv is run whenever the browser finds it. When you put it into the head of your document, the browser tries to find lifecheck id before the lifecheck element is created. You must add your script below the lifecheck input in order for your code to work.

小开

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. include the js file from google's CDN (https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js)

then in your script tag (still in the <head>) use:

$(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);
});
});
小开 
<!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>
小开

You can use this code, it can return true or false:

$(document).ready(function(){
  

//add selector of your checkbox


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

console.log(status);


});

小开

Following will return true when checkbox is checked and false when not.

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

Replace $(this) with the variable you want to check.

And used in a condition:

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

提交答案