whats wrong with my jquery radio button?_问答_开发者

whats wrong with my jquery radio button?

开发者 https://www.devze.com 2023-01-15 04:14 出处：网络

hello i am new to jquery can any one please tell me what\'s wrong with my code 开发者_高级运维 <html>

hello i am new to jquery can any one please tell me what's wrong with my code

  开发者_高级运维 <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"></script>
</head>
<script type="text/javascript">
$("input[@name='chkBox']").click(function(){
    if ($("#chkBox"]:checked").val() == 'a')
        // Code for handling value 'a'
  {
  $("#msgid").html("This is Hello World by JQuery");
  }

});

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

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"></script>

        <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>

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"></script>
<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>