How to check checkbox value in Jquery UI Dialog

Question

I am trying to call changeShowTips() method in JQuery UI dialog, however the method always returns "NOT checked!!!!"

what seems to be the problem?

    <div id="dialog-tip">
        <div>
            <input type="checkbox" name="showTips" value="showTips" checked="checked" onclick="changeShowTips();"/>Show tips on start up
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            showTips()
        });


        function showTips() {
            $("#dialog-tip").dialog({
                height: 520,
                width: 515,
                modal: true,
            }).parents('.ui-dialog:eq(0)').wrap('<div class="black-tie"></div>');             
        }

        function changeShowTips() {
            if (showTips.checked == true) {
                alert('checked!!!');
            }
            else {
                alert('NOT checked!!!');
            }
        }

    </script>

if (showTips.checked = true) should just be if (showTips.checked), but where does showTips come from? — xdazz
– xdazz, Commented Sep 29, 2012 at 13:26

Ram · Accepted Answer · 2014-10-30 09:23:49Z

3

That's because in your code showTips refers to your function not the target element.

<input type="checkbox" 
       name="showTips" 
       value="showTips" 
       checked="checked" 
       onclick="changeShowTips(this);"
/> Show tips on start up

function changeShowTips(showTips) {
     if (showTips.checked) {
         alert('checked!!!');
     }
     else {
         alert('NOT checked!!!');
     }
}

http://jsfiddle.net/n74JG/

edited Oct 30, 2014 at 9:23

answered Sep 29, 2012 at 13:32

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Harry · Accepted Answer · 2012-09-29 13:27:48Z

You have some messy jQuery

 <div id="dialog-tip">
    <div>
        <input type="checkbox" name="showTips" value="showTips" checked="checked"/>Show tips on start up
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        showTips()

        $('input', '#dialog-tip').click(changeShowTips()); // do not have inline js, bind it here
    });


    function showTips() {
        $("#dialog-tip").dialog({
            height: 520,
            width: 515,
            modal: true,
        }).parents('.ui-dialog').eq(0).wrap('<div class="black-tie"></div>');       
        // it is faster for sizzle to use a standard css selector to modify the jquery object and then use a jquery specific selector 'eq' separately
        // instead of combining css/jquery selectors in one statement      
    }

    function changeShowTips() {
        if ($('input', '#dialog-tip').is(':checked')) { // there is jQuery for this - you should also compare and not assign
            alert('checked!!!');
        }
        else {
            alert('NOT checked!!!');
        }
    }

</script>

Rich Andrews · Accepted Answer · 2012-09-29 13:23:54Z

1

try this instead...

Give the input an id of showTips as well as the name then...

    function changeShowTips() {
        if ($('#showTips').is(':checked')) {
            alert('checked!!!');
        }
        else {
            alert('NOT checked!!!');
        }
    }

answered Sep 29, 2012 at 13:23

Rich Andrews

4,1883 gold badges38 silver badges48 bronze badges

Comments

Gregor Weber · Accepted Answer · 2012-09-29 13:29:22Z

0

Syntax wise it looks like you are trying to use vanilla JS not jQuery to check the checkbox.

A jQuery selector looks like this $([...]) and typically you use it to select for classes $(".someclass") or ids $("#someid"). If you really don't want to give the input field an ID then take a look at the documentation: http://api.jquery.com/attribute-equals-selector/

And then you can use $([...]).prop("checked") to find out if it is checked or not.

answered Sep 29, 2012 at 13:29

Gregor Weber

6889 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to check checkbox value in Jquery UI Dialog

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related