[英]read a html checkbox in javascript
Not sure if this is the correct question but baiscally I have html form which has a checkbox. 不知道这是否是正确的问题,但是以百分数计,我有带有复选框的html表单。 i'm using websockets that need to pull that value with the javascript code. 我正在使用需要用javascript代码提取该值的websocket。 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...? 我应该如何获取coorect值以放入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>
Use the selector :checked
and test if the length of the selected elements is greater then 0: 使用选择器:checked
并测试所选元素的长度是否大于0:
$('form#emit').submit(function(event) {
socket.emit('my event', {data: $('#emit_data').val(),
checkbox: $('#checkbox:checked').length > 0
}
);
There are a couple of ways but I prefer reading the checked
property: 有两种方法,但我更喜欢阅读checked
属性:
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 . 您看到它总是被检查的原因是因为val()
正在检查被checked
属性,而不是被checked
属性 。 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. 该属性反映了原始呈现的标记,而不反映控件的真实当前状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.