jQWidgets Forums

jQuery UI Widgets › Forums › Editors › CheckBox, RadioButton › HOW TO uncheck MULTIPLE CHECKBOXES USING JQUERY + CLASS

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    HOW TO uncheck MULTIPLE CHECKBOXES USING JQUERY + CLASS Posts
  • October 31, 2013 at 2:08 pm HOW TO uncheck MULTIPLE CHECKBOXES USING JQUERY + CLASS #31702

    edilson88
    Participant

    I’m trying to uncheck all checkboxes inside a div with no luck so far.

    this is my code:
    $(‘.myclass’).jqxCheckBox(‘uncheck’);

    Any help ?

    Thanks

    October 31, 2013 at 4:45 pm HOW TO uncheck MULTIPLE CHECKBOXES USING JQUERY + CLASS #31706

    Peter Stoev
    Keymaster

    Hi edilsonamaral,

    Please, find a working sample below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
         <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {            
                // Create jqxCheckBox
                $("#jqxCheckBox").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox2").jqxCheckBox({ width: 120, height: 25, checked: true});
                $("#jqxCheckBox3").jqxCheckBox({ width: 120, height: 25, checked: true});
                $("#jqxCheckBox4").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox5").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox6").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox7").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox8").jqxCheckBox({ width: 120, height: 25});
                $("#jqxCheckBox9").jqxCheckBox({ width: 120, height: 25 });
                // uncheck all
                $(".jqx-checkbox").jqxCheckBox({ checked: false });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style='font-family: Verdana Arial; font-size: 12px; width: 400px;'>
            <div style='float: left; width: 400px;'>
                <h3 style='margin-left: 15px;'>Categories</h3>
                <div id='jqxCheckBox' style='margin-left: 10px; float: left;'>
                    Entertainment</div>
                <div id='jqxCheckBox2' style='margin-left: 10px; float: left;'>
                    <span>Computers</span></div>
                <div id='jqxCheckBox3' style='margin-left: 10px; float: left;'>
                    <span>Sports</span></div>
            </div>
            <div style='float: left; width: 400px; margin-top: 10px;'>
                <div id='jqxCheckBox4' style='margin-left: 10px; float: left;'>
                    Health</div>
                <div id='jqxCheckBox5' style='margin-left: 10px; float: left;'>
                    <span>Finance</span></div>
                <div id='jqxCheckBox6' style='margin-left: 10px; float: left;'>
                    <span>Travel</span></div>
            </div>
            <div style='float: left; width: 400px; margin-top: 10px;'>
                <div id='jqxCheckBox7' style='margin-left: 10px; float: left;'>
                    Music</div>
                <div id='jqxCheckBox8' style='margin-left: 10px; float: left;'>
                    <span>Technology</span></div>
                <div id='jqxCheckBox9' style='margin-left: 10px; float: left;'>
                    <span>Publishing</span></div>
            </div> 
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.