简体   繁体   English

阅读javascript中的html复选框

[英]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. 属性反映了原始呈现的标记,而不反映控件的真实当前状态。

More on properties vs. attributes . 有关属性与属性的更多信息

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

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