Eu tenho este código:

   <fieldset class="question">
       <label for="coupon_question">Do you have a coupon?</label>
       <input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
       <span class="item-text">Yes</span>
   </fieldset>

   <fieldset class="answer">
       <label for="coupon_field">Your coupon:</label>
       <input type="text" name="coupon_field" id="coupon_field"/>
   </fieldset>

E eu gostaria de mostrar / ocultar o campo de resposta "answer" (o padrão é oculto) depois de um clique na caixa de seleção no campo "pergunta" Como fazer isso. Eu não fui capaz de fazer isso usando a técnica para um elemetn clássico como:

<script>
    $().ready(function(){

        $('.question').live('click',function() {
                 $('.answer').show(300);
            }
            ,
            function(){
                $('.answer').hide(200);
            }
        );

    });
</script>

Alguém poderia me ajudar como fazer isso usando checkbox? Além disso, se possível, anular (desmarque) a caixa de seleção quando estiver oculta.