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. 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
. What's going wrong?
This question is related to
javascript
html
checkbox
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.
var elementCheckBox = document.getElementById("IdOfCheckBox");_x000D_
_x000D_
_x000D_
elementCheckBox[0].checked //return true if checked and false if not checked
_x000D_
thanks
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.
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
}
You can use this code, it can return true
or false
:
$(document).ready(function(){_x000D_
_x000D_
//add selector of your checkbox_x000D_
_x000D_
var status=$('#IdSelector')[0].checked;_x000D_
_x000D_
console.log(status);_x000D_
_x000D_
});
_x000D_
<!doctype html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
<label><input class="lifecheck" id="lifecheck" type="checkbox" checked >Lives</label>_x000D_
_x000D_
<script type="application/javascript" >_x000D_
lfckv = document.getElementsByClassName("lifecheck");_x000D_
if (true === lfckv[0].checked) {_x000D_
alert('the checkbox is checked');_x000D_
}_x000D_
</script>_x000D_
</body>_x000D_
</html>
_x000D_
so after you can add event in javascript to have dynamical event affected with the checkbox .
thanks
<!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>
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);
});
});
Source: Stackoverflow.com