在 javascript 中读取 html 复选框

Posted 2023-02-16

技术标签:

【中文标题】在 javascript 中读取 html 复选框【英文标题】：read a html checkbox in javascript 【发布时间】：2014-09-29 21:54:06 【问题描述】：

不确定这是否是正确的问题，但基本上我有一个带有复选框的 html 表单。我正在使用需要使用 javascript 代码提取该值的 websockets。但无论天气如何，该框是否被选中，它都会显示“是”的值。我应该如何去获取 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>

【问题讨论】：

【参考方案1】：

使用选择器:checked 并测试所选元素的长度是否大于0：

$('form#emit').submit(function(event) 
        socket.emit('my event', data: $('#emit_data').val(), 
                                 checkbox: $('#checkbox:checked').length > 0 
                                
     );

【讨论】：

【参考方案2】：

有几种方法，但我更喜欢阅读 checked 属性：

var isChecked = $('#checkbox').prop('checked');

这是另一个读起来更好听的等效语句：

var isChecked = $('#checkbox').is(':checked');

您看到它总是被检查的原因是因为val() 正在检查checked 属性而不是checked 属性。我的两个示例都应该从 property 而不是 attribute 读取。属性反映了最初呈现的标记，而不是控件的真实当前状态。