jQuery का उपयोग कर चेकबॉक्स चेक/अनचेक किए गए राज्यों पर कोई तत्व कैसे दिखाना/छुपाएं?

Question

मैं इस कोड है:

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

और मैं दिखाने/"जवाब" fieldset को छिपाने के लिए (डिफ़ॉल्ट छिपा हुआ है) चाहते हैं fieldset में चेकबॉक्स "सवाल" पर क्लिक करने के बाद कि कैसे करना है।

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

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

    }); 
</script> 

किसी ने मुझसे मदद कर सके कैसे चेकबॉक्स का उपयोग करने के लिए: मैं की तरह एक क्लासिक elemetn के लिए तकनीक का उपयोग करने के लिए सक्षम नहीं था? यदि छुपा हुआ है तो भी चेकबॉक्स को शून्य (अनचेक) करना संभव है।

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

Answer 2

प्रयास करें

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

}); 

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

इस

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

प्रयास करें

FIDDLE

Answer 5

इस

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

Answer 6

सरल प्रयास करें - और मैं आईडी के लिए चेकबॉक्स वर्ग के रूप में अच्छी तरह से बदल दिया है:

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