JQuery Checked Calculator

1539 ワード

test.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >

    $(document).ready(function () {

        $('label').click(function () {

            var total = 0;
            $('.option:checked').each(function () {
                total += parseInt($(this).val());
                $(this).parent().css('background', 'green')
            });

            $('.option:not(:checked)').each(function () {
                $(this).parent().css('background', '#fff')
            });

            $('#total').html('$' + total);

        });

    });
    
</script>
</head>
<body>

<label><input type="checkbox" class="option" value="200" /> Project1</label><br />
<label><input type="checkbox" class="option" value="300" /> Project2</label><br />
<label><input type="checkbox" class="option" value="400" /> Project3</label><br />
<label><input type="checkbox" class="option" value="800" /> Project4</label><br />
<label><input type="checkbox" class="option" value="1200" /> Project5</label><br />

<div id="total" >$0</div>

</body>
</html>

CSS skills: 5) jquery hover(over,out)

Go言語を真剣に勉強してみた〜Revel（環境構築）編〜