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>

James McDonnell · Accepted Answer · 2014-09-29 21:56:49Z

1

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

answered Sep 29, 2014 at 21:56

James McDonnell

3,7101 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:26:32Z

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.

2 Comments

user1601716 Over a year ago

got it, is there a central location for this kind of information?

Cᴏʀʏ Over a year ago

There is a small section titled "Attributes vs. Properties" on the jQuery API Documentation page for prop(). If you're going to put jQuery in your toolbox, I highly suggest reading through the entire API Documentation site. So there's that, and 12 years of web application development experience... :)

Collectives™ on Stack Overflow

read a html checkbox in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related