About scope in JavaScript

Question

When I change the first checkbox, I want to change the var theSame, but it seems it doesn't change in if(theSame == 1); but it changes in alert("b"+theSame). How to handle this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var theSame = 1;
            $("input[name='thesame']").change(function(){
                theSame = $(this).is(":checked") ? 1 : 0;
                alert("a"+theSame);
            });
            if(theSame == 1){
                $(".check_list input").change(function(){
                    alert("b"+theSame);
                });
            }
         });
    </script>
</head>
<body>
<input type="checkbox" name="thesame">same
<br>
<div class="check_list">
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="son">ppp
</div>
</body>
</html>

thank you,this what i want to achieve:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("input[name='thesame']").change(function(){
        var theSame = this.checked ? 1 : 0;
        show(theSame)
        });
       function show(i){
           if(i == 1){
            $(".check_list input").change(function(){
            var inputName = $(this).attr("name");
            $("input[name=" + inputName + "]").attr("checked",this.checked)
            });
       }else{
            $(".check_list input").unbind("change")
           }
        }
});
    </script>
</head>
<body>
<input type="checkbox" name="thesame" class="check-all">same
<br>
<div class="check_list">
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="sister">ppp
    <input type="checkbox" name="dog">ppp
</div>
<hr>
<div class="check_list">
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="sister">ppp
    <input type="checkbox" name="dog">ppp
</div>
<hr>
<div class="check_list">
    <input type="checkbox" name="son">ppp
    <input type="checkbox" name="sister">ppp
    <input type="checkbox" name="dog">ppp
</div>

</body>
</html>

Side note — never use `$(this).is(":checked")`. You can use `this.checked`, which is *much* faster performing *and* easier to read. [A cool trick you can use](http://stackoverflow.com/questions/61088/hidden-features-of-javascript/2243631#2243631) here is `+this.checked` instead of `this.checked ? 1 : 0`. — Andy E, Nov 16 '11 at 11:51
What are you expecting to happen? The code inside `if(theSame == 1){` will always run as you have just set `theSame` to 1. — Richard Dalton, Nov 16 '11 at 11:58

score 2 · Answer 1 · answered Nov 16 '11 at 12:00

This is not really a question of scope, but more of asynchrony. Let's step through your code:

$(document).ready(function(){
    // Define function-scope variable `theSame`, assign it a value of `1`
    var theSame = 1;

    // Bind a `change` event handler to an element, this function will run later!
    $("input[name='thesame']").change(function(){
        theSame = +this.checked;
        alert("a"+theSame);
    });

    // At this point, `theSame` has not changed from its original value!
    if(theSame == 1){
        $(".check_list input").change(function(){
            // Here, however, `theSame` may have had its value changed
            alert("b"+theSame);
        });
    }
});

So, as you can see, when the if statement runs it will always have a value of 1, because the value isn't changed until later, after this code has already been executed.

If you move the if statement to inside the event handler, you'll see different results:

$(".check_list input").change(function(){
    if(theSame){
        alert("b"+theSame);
    }
});

Here, you'll only see the alert if theSame is 1.

thanks for your answer!i have a try to move the if inside the event,but when i toggle click the first checkbox(in my project, it's a must does),then click other checkbox one time, it'll alert double times and more... — Rupert, Nov 16 '11 at 13:30
@user: It sounds like you copied the event binding along with the `if` statement into the `change` function, so every time it runs it binds the event again. You probably don't want to do that. — Andy E, Nov 16 '11 at 13:34
$(document).ready(function(){ $("input[name='thesame']").change(function(){ theSame = this.checked ? 1 : 0; alert("a"+theSame) show(theSame) }); function show(i){ if(i == 1){ $(".check_list input").change(function(){ alert("b"+i) }); }else{ $(".check_list input").unbind("change"); } } }); — Rupert, Nov 16 '11 at 14:03

About scope in JavaScript

1 Answers1