Как показать/скрыть элемент на флажке проверенных/непроверенных состояний с помощью jQuery?

У меня есть этот код:

   <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>

И я хотел бы показать/скрыть поле ответа "ответ" (по умолчанию скрыто) после щелчка на флажке в поле "вопрос". Как это сделать. Я не мог этого сделать, используя технику для классического элемента:

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

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

    });
</script>

Может ли кто-нибудь помочь мне, как это сделать, используя флажок? Также, если возможно, снимите (снимите галочку) флажок, когда он скрыт.

Ответы

Ответ 1

Прикрепите событие onchange к флажку:

<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>

Ответ 2

Попробуйте это

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

FIDDLE

Ответ 3

Простейший - и я также изменил класс checkbox на ID:

$(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>

Ответ 4

Try

$(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']()
    });

});

Демо: Fiddle

или

$(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);
        }
    });

});

Ответ 5

Попробуйте это

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

Ответ 6

$(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);
       }
    });
});