Jquery check if checkbox checked

Question

Somthing is wrong with this code.

I have div box and when click on Coutries title he shows the list of countries. that list contain 5 check box

Germania
USA
Serbia
France

I have problem when i try to check if some countury checked..

   searchContainer: function() {

        var title = $(".title-search");

         // On click show countury list 

        title.click(function(){                  
                $(".state").fadeToggle('fast',function(){

                    // check if sothing checked

                    if ($("#france").is(':checked')) {
                        alert("France Selected");

                        // Show all cities from this countury
                    }

                });
        });
    }

But when i check a country nothing happens....

First time i try this:

if($("#france").checked = true)) {
     alert("FRANCE");
}

But when i click on title and when fadeToggle is done he show alert(FRANCE) whitout checking.

HTML :

<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="javascript/gfactory.js"></script>
        <link rel="stylesheet" type="text/css" href="css/gfactory.css">
        <script>

            $(document).ready(function() {
                window.Balcanrent.init();
                window.Balcanrent.searchContainer();
            });

        </script>

    </head>
    <body>

        <form name="search">

            <div class="search-box"> 
                <div class="title-search"> Counturies </div>
                <div class="state">
                    <ul class="s_list">
                        <li><input id="ger" type="checkbox" value="gr">Germania</li>
                        <li><input id="usa" type="checkbox" value="usa">USA</li>
                        <li><input id="sr" type="checkbox" value="sl"> Serbia </li>
                        <li><input id="france" type="checkbox" value="fr">France </li>
                    </ul>                   
                </div>
            </div>
        </form>
</body>
</html>

And i try to use .length > 0 but nothing again. What i do wrong?

Thanks.

try : document.getElementById("checkboxid").checked property of JS. — Vedant Terkar
– Vedant Terkar, Commented Aug 10, 2013 at 17:46
jQuery.prop() is the correct way to determine if a checkbox is checked (see my answer). — jahroy
– jahroy, Commented Aug 10, 2013 at 17:47
It would help if you made a JSFiddle of your example so everyone could see exactly what you're trying — Sean Redmond
– Sean Redmond, Commented Aug 10, 2013 at 18:09

Brad Peabody · Accepted Answer · 2013-08-10 18:03:55Z

4

If you prefer to use the CSS selector approach, you can do this:

var c = $('#france').is(":checked");

Or:

var c = $('#france').prop("checked");

.prop() is probably the better choice.

From here: http://api.jquery.com/prop/ - is() and prop(), while they retrieve different things, both work reliably. While using attr() has a different meaning - it retrieves only the default value

edited Aug 10, 2013 at 18:03

answered Aug 10, 2013 at 17:47

Brad Peabody

11.5k10 gold badges50 silver badges67 bronze badges

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

1 Comment

Brad Peabody Over a year ago

@jahroy I didn't copy your answer, was providing more explanation. But you're right, I did screw it up the first time, it's right now.

Sithu · Accepted Answer · 2013-08-10 18:21:54Z

1

I have created a fiddle here for you.

http://jsfiddle.net/kyawsithu/shC3c/1/

Below code you used for checking the Checkbox checked property is correct.

    if ($("#france").is(':checked')) {
        alert("France Selected");
    }

EDIT: When you click again on Countries when States fade in, the checked is still true and it shows the alert.

edited Aug 10, 2013 at 18:21

answered Aug 10, 2013 at 18:12

Sithu

4,4691 gold badge24 silver badges29 bronze badges

Comments

lollo · Accepted Answer · 2013-08-10 18:28:30Z

1

Hope this can help you..

   var title = $(".title-search");

   title.click( function(){ 
    var selected = '';
    $('.s_list input:checked').each(function() {
     selected += $(this).attr('id') +  ',';
      }); 
         $(".state").fadeToggle('fast');
        if(selected.length)
            alert('selected: ' + selected);
    });

answered Aug 10, 2013 at 18:28

lollo

1651 silver badge13 bronze badges

Collectives™ on Stack Overflow

Jquery check if checkbox checked

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related