How to show hide an element on checkbox checked unchecked states using jQuery

Question

I have this code          lt fieldset class  question  gt          lt label for  coupon question  gt Do you have a coupon  lt  label gt          lt input class  coupon question  type  checkbox  name  coupon question  value  1    gt          lt span class  item-text  gt Yes lt  span gt      lt  fieldset gt       lt fieldset class  answer  gt          lt label for  coupon field  gt Your coupon  lt  label gt          lt input type  text  name  coupon field  id  coupon field   gt      lt  fieldset gt    And I would like to show hide the  answer  fieldset  default is hidden  after a click on the checkbox in fieldset  question  How to do that  I wasn t able to do that using the technique for a classic elemetn like    lt script gt          ready function                 question   live  click  function                          answer   show 300                                           function                        answer   hide 200                                      lt  script gt    Could somebody help me how to do that using checkbox  Also if possible to null  uncheck  the checkbox when it s hidden

User · Answer

lt label  onclick  chkBulk     gt       lt div class  icheckbox flat-green  style  position  relative   gt         lt asp CheckBox ID  chkBulkAssign  runat  server  class  flat          Style  position            absolute  opacity  0     gt         lt  div gt        Bulk Assign       lt  label gt         function chkBulk         if      id  chkBulkAssign    0  checked           div  icheckbox flat-green   addClass  checked            id  btneNoteBulkExcelUpload    show                        else         div  icheckbox flat-green   removeClass  checked           id  btneNoteBulkExcelUpload    hide

User · Answer

Attach onchange event to the checkbox    lt input class  coupon question  type  checkbox  name  coupon question  value  1  onchange  valueChanged     gt    lt script type  text javascript  gt      function valueChanged                 if     coupon question   is   checked                       answer   show            else                 answer   hide           lt  script gt

User · Answer

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                    Demo  Fiddle  Or    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

User · Answer

Simplest - and I changed the checkbox class to ID as well    x000D   x000D    function     x000D        coupon question   on  click  function     x000D          answer   toggle this checked   x000D        x000D      x000D   answer   display none   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt fieldset class  question  gt  x000D     lt label for  coupon question  gt Do you have a coupon  lt  label gt  x000D     lt input id  coupon question  type  checkbox  name  coupon question  value  1    gt  x000D     lt span class  item-text  gt Yes lt  span gt  x000D   lt  fieldset gt  x000D   x000D   lt fieldset class  answer  gt  x000D     lt label for  coupon field  gt Your coupon  lt  label gt  x000D     lt input type  text  name  coupon field  id  coupon field    gt  x000D   lt  fieldset gt  x000D   x000D   x000D

User · Answer

Try this   lt script gt          ready function                coupon question   live  click  function                          if      coupon question   is   checked                          answer   show                  else                       answer   hide                                        lt  script gt

User · Answer

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

User · Answer

Try this      answer   hide        coupon question   click function         if   this  is   checked                  answer   show 300         else               answer   hide 200               FIDDLE

[jquery] How to show/hide an element on checkbox checked/unchecked states using jQuery?

Examples related to jquery