Come mostrare/nascondere un elemento sulla casella selezionata/deseleziona gli stati usando jQuery?

Question

Ho questo codice:

<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 vorrei mostrare/nascondere la fieldset "risposta" (di default è nascosta) dopo un clic sulla casella di controllo in fieldset "domanda" Come per farlo. Non ero in grado di farlo utilizzando la tecnica per un classico come elemetn:

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

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

    }); 
</script> 

Qualcuno potrebbe aiutarmi come farlo utilizzando casella di controllo? Inoltre, se possibile, deselezionare (deselezionare) la casella di controllo quando è nascosta.

Answer 1

Fissare onchange evento per la casella di controllo:

<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/> 

<script type="text/javascript"> 
function valueChanged() 
{ 
    if($('.coupon_question').is(":checked")) 
     $(".answer").show(); 
    else 
     $(".answer").hide(); 
} 
</script> 

Answer 2

Prova

$(document).ready(function(){ 
    //Register click events to all checkboxes inside question element 
    $(document).on('click', '.question input:checkbox', function() { 
     //Find the next answer element to the question and based on the checked status call either show or hide method 
     $(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']() 
    }); 

}); 

Demo: Fiddle

O

$(document).ready(function(){ 
    //Register click events to all checkboxes inside question element 
    $(document).on('click', '.question input:checkbox', function() { 
     //Find the next answer element to the question and based on the checked status call either show or hide method 
     var answer = $(this).closest('.question').next('.answer'); 

     if(this.checked){ 
      answer.show(300); 
     } else { 
      answer.hide(300); 
     } 
    }); 

}); 

Answer 3

$(document).ready(function() { 
    $(document).on("click", ".question", function(e) { 
     var checked = $(this).find("input:checkbox").is(":checked"); 
     if (checked) { 
      $('.answer').show(300); 
     } else { 
      $('.answer').hide(300); 
     } 
    }); 
}); 

Answer 4

Prova questa

$(".answer").hide(); 
$(".coupon_question").click(function() { 
    if($(this).is(":checked")) { 
     $(".answer").show(300); 
    } else { 
     $(".answer").hide(200); 
    } 
}); 

FIDDLE

Answer 5

provare questo

<script> 
    $().ready(function(){ 
     $('.coupon_question').live('click',function() 
     { 
      if ($('.coupon_question').is(':checked')) { 
       $(".answer").show(); 
      } else { 
       $(".answer").hide(); 
      } 
     }); 
    }); 
</script> 

Answer 6

più semplice - e ho cambiato la classe casella di controllo per ID così:

$(function() { 
 
    $("#coupon_question").on("click",function() { 
 
    $(".answer").toggle(this.checked); 
 
    }); 
 
});

.answer { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<fieldset class="question"> 
 
    <label for="coupon_question">Do you have a coupon?</label> 
 
    <input id="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>