read a html checkbox in javascript
Question
Not sure if this is the correct question but baiscally I have html form which has a checkbox. i'm using websockets that need to pull that value with the javascript code. But regardless of weather the box is checked or not, it shows the value of 'yes'. How should I go about getting the coorect value to pull into python...?
<!DOCTYPE HTML>
<html>
<head>
<title>Flask-SocketIO Test</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
namespace = '/test'; // change to an empty string to use the global namespace
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
socket.on('connect', function() {
socket.emit('my event', {data: 'Connected... Waiting for you...'});
});
socket.on('my response', function(msg) {
$('#log').append('<br>' + msg.data);
});
$('form#emit').submit(function(event) {
socket.emit('my event', {data: $('#emit_data').val(),
checkbox: $('#checkbox').val()
}
);
return false;
});
});
</script>
</head>
<body>
<h1>Flask-SocketIO Test</h1>
<h2>Send:</h2>
<form id="emit" method='POST' action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message"><br>
<input id="checkbox" checked="checked" name="checkbox" type="checkbox"></td>
<input type="submit" value="Echo"></div>
</form>
<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>
2 answers
solution1
1 2014-09-29 21:56:49
Use the selector :checked and test if the length of the selected elements is greater then 0:
$('form#emit').submit(function(event) {
socket.emit('my event', {data: $('#emit_data').val(),
checkbox: $('#checkbox:checked').length > 0
}
);
solution2
1 2014-09-29 21:57:48
There are a couple of ways but I prefer reading the checked property:
var isChecked = $('#checkbox').prop('checked');
This is another equivalent statement that reads a little nicer:
var isChecked = $('#checkbox').is(':checked');
The reason you are seeing it always checked is because val() is inspecting the checked attribute and not the checked property . Both of my examples should read from the property instead of the attribute . The attribute is reflective of the originally rendered markup and not the true current state of the control.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.