CODEWITHSUNDEEP
javascriptscope
Rupert
Rupert

Reputation: 125

About scope in JavaScript

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>

Upvotes: 0

Views: 152

Answers (1)

Andy E
Andy E

Reputation: 344527

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.

Upvotes: 2

Related Questions