ansaurus

Question

whats wrong with my jquery radio button???

Answer 1

+1 A:

You have quite a few things wrong in the script.

Wrap the checkbox click function within a $(document).ready( function() { } ) as otherwise it will not be able to see the checkbox being added to the DOM later.
Please check the error console of your web browser to catch other errors.

Fixed script:

<html>
    <head>
        <title>jQuery Hello World</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

        <script type="text/javascript">
            $(document).ready(
                function() {
                $("#chkBox").click(
                    function() {
                        if ($("#chkBox:checked").val() == 'a') {
                            // Code for handling value 'a'
                            $("#msgid").html("This is Hello World by JQuery");
                        }
                    }
                );                                                                                                                                           
                }                                                                                                                                            
            );                                                                                                                                               
        </script>                                                                                                                                            
    </head>                                                                                                                                                  

    <body>                                                                                                                                                   
        <input type="radio" name="chkBox" id="chkBox" value="a" />                                                                                           
        <div id="msgid">                                                                                                                                     
        </div>                                                                                                                                               
    </body>                                                                                                                                                  
</html>

Alan Haggai Alavi 2010-09-09 05:47:07

Answer 2

+1 A:

not just putting it in an onload or domready, there's errors in your syntax and jquery selectors too. see the working fixed version below:

<!doctype html>
<html>
<head>
    <title>jQuery Hello World</title>
</head>
<body>
    <input type="radio" name="chkBox" id="chkBox" value="a" />
    <div id="msgid">
    </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(function() { //on dom ready
        $('input[name=chkBox]').click(function(){ //syntax corrected
            if ($('#chkBox:checked').val() == 'a')  { //syntax corrected, selector corrected
                $('#msgid').html("This is Hello World by JQuery");
            }
        });
    });
</script>
</body>
</html>

Moin Zaman 2010-09-09 05:49:00

using anonymous functions directly in jQuery selector is d=not really encouraged.

RobertPitt 2010-09-09 05:50:34

@RobertPitt: Please explain?

Moin Zaman 2010-09-09 05:52:10

using `$(function(){});` over `$(document).ready(function(){})` is discouraged, well not so much discouraged but its not the norm when it comes to jQuery and document states. not a big issue, just a small note.

RobertPitt 2010-09-09 06:05:06

ansaurus

tags:

views:

answers:

whats wrong with my jquery radio button???

related questions