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>

score 1 · Answer 1 · answered Sep 29 '14 at 21:56

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 
                                }
     );

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

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.

read a html checkbox in javascript

2 Answers2