CODEWITHSUNDEEP
javascriptjqueryhtml
mtfurlan
mtfurlan

Reputation: 1062

JS checkbox alert on selection

We've been having some fun trying to get checkboxes selection to do things in javascript.

At this point, I copied the code from http://jsfiddle.net/lesson8/RFxwp/ And it doesn't work. I even added in a check for jquery.

<!DOCTYPE html>
<html>
    <head>
        <title>WHY</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            if (window.jQuery) {
                alert("jquery enabled");
            } else {
                alert("jquery broken");
            }

            $('#rollDiv :checkbox').click(function () {
                        var $this = $(this);
                        // $this will contain a reference to the checkbox
                        if ($this.is(':checked')) {
                            // the checkbox was checked 
                            alert('checked');
                        } else {
                            // the checkbox was unchecked
                            alert('unchecked');
                        }
                    });

        </script>
    </head>
    <body>
        <div id="rollDiv">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
        </div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </body>
</html>

Is live here: http://mfurland.w3.uvm.edu/ical/test.html

It validates fine at http://validator.w3.org/check?uri=http%3A%2F%2Fmfurland.w3.uvm.edu%2Fical%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0

I am obviously missing something, but have no idea what to check. Many thanks for any help.

Upvotes: 0

Views: 144

Answers (3)

marionebl
marionebl

Reputation: 3382

Check this fiddle: http://jsfiddle.net/marionebl/8M7z4/3/.

$(document).ready(function(){
    $('#rollDiv').find('input:checkbox').on('change', function () {
       alert($(this).is(':checked') ? 'checked' : 'unchecked');
    });
});

Looking at the fiddle you gave as reference, you can see that in the Frameworks & Extensions area on the left sidebar the option onDomReady is set. This causes jsfiddle to wrap the provided js code into

$(function(){ ... });

which is equivalent to

$(document).ready(function(){ ... });

and is missing at your live version.

Side note: While listening for click events will work for most users, there are alternative methods to check a checkbox, e.g. on screen readers or programmatically via js. Listening for change events catches these cases too and is more secure in almost every case.

Upvotes: 1

chyupa
chyupa

Reputation: 179

$('#rollDiv :checkbox').click(function () {
    var $this = $(this);
    // $this will contain a reference to the checkbox
    if ($this.is(':checked')) {
        // the checkbox was checked 
        alert('checked');
    } else {
        // the checkbox was unchecked
        alert('unchecked');
    }
});

shoud be:

$('#rollDiv input:checkbox').click(function () {
    var $this = $(this);
    // $this will contain a reference to the checkbox
    if ($this.is(':checked')) {
        // the checkbox was checked 
        alert('checked');
    } else {
        // the checkbox was unchecked
        alert('unchecked');
    }
});

The ':checkbox' is a shortcode for input[type='checkbox']. It only works if you also pass the input as stated above.

Upvotes: 0

steinmas
steinmas

Reputation: 398

You need to encapsulate the button click method within $(document).ready(), like this: 

$(document).ready(function(){
    $('#rollDiv :checkbox').click(function () {
        var $this = $(this);
        // box  will contain a reference to the checkbox
        if ($this.is(':checked')) {
             // the checkbox was checked 
             alert('checked');
        } else {
             // the checkbox was unchecked
             alert('unchecked');
        }
    });
});

Upvotes: 1

Related Questions