CODEWITHSUNDEEP
jquery
Rahul
Rahul

Reputation: 33

How to make multiple toggle to work in jquery

I am working on jquery script ,where after cliking addmore button ,a particular block of html code is appended. in each block there is checkbox ,where on click on click on checkbox some part of html is hidden. my question is to hide each independently.

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){

            if($(this).attr("value")=="YES"){
                $(".box").toggle();
                /*$("#ab").html('currently Attending');*/
            }
        });
    });
</script>

 <script>
$(document).ready(function(){
$('#addmore').click(function(){
$('#item2').append("<div class='form-group'><label class='col-sm-4 '>Period</label><div class='col-sm-8'><div class='checkbox'><label><input type='checkbox' value='YES' name='currently_attending'>I`m currently attending this course</label></div><div class='row'><div class='col-xs-3'> Month<select class='span2  form-control' required name='from_month'><option value=''>Month</option><option value='Jan'>Jan</option>\
                                     \ <option value='Feb'>Feb</option>\
                                      <option value='March'>March</option>\
                                      <option value='April'>April</option>\
                                      <option value='May'>May</option>\
                                      <option value='June'>June</option>\
                                      <option value='July'>July</option>\
                                      <option value='Aug'>Aug</option>\
                                      <option value='Sept'>Sept</option>\
                                      <option value='Oct'>Oct</option>\
                                      <option value='Nov'>Nov</option>\
                                      <option value='Dec'>Dec</option>\
                                    </select>\
                                  </div>\
                                 <div class='col-xs-3'>\
                                  Year\
                                      <input type='text' class='form-control' placeholder='year' name='from_year' required pattern='[0-9]{4,4}'>\
                                  </div>\
                                  <span class='box'>\
                                  <div class='col-xs-3'>\
                                  Month\
                                    <select class='span2 form-control'  name='to_month' >\
                                      <option value=''>Month</option>\
                                      <option value='Jan'>Jan</option>\
                                      <option value='Feb'>Feb</option>\
                                      <option value='March' >March</option>\
                                      <option value='April'>April</option>\
                                      <option value='May'>May</option>\
                                      <option value='June'>June</option>\
                                      <option value='July'>July</option>\
                                      <option value='Aug'>Aug</option>\
                                      <option value='Sept'>Sept</option>\
                                      <option value='Oct'>Oct</option>\
                                      <option value='Nov'>Nov</option>\
                                      <option value='Dec'>Dec</option>\
                                    </select>\
                                  </div>\
                                  <div class='col-xs-3'>\
                                  Year\
                                     <input type='text' class='form-control' placeholder='year' name='to_year'  >\
                                  </div>\
                                  </span>\
                                  <div id='ab'></div>\
                                </div>\
                              </div>\
                            </div>\
                           <div class='cl'></div>\
                            <div class='form-group'>\
                              <label class='col-sm-4'>Degree / Course title*</label>\
                              <div class='col-sm-8'>\
                                <input type='text' class='form-control ' name='title' required />\
                              </div>\
                            </div>\
                           <div class='cl'></div>\
                                      ")});



});
$("#item2").on("click",".delete", function(){
$(this).closest(".form-group").remove();
});
                             </script>

Upvotes: 2

Views: 65

Answers (1)

Manoz
Manoz

Reputation: 6617

Try this-

$(document).ready(function(){
    $(document).on('change','input[type="checkbox"]',function(){
        var boxElement=$(this).closest('.form-group').find('span.box');
        $(this).is(':checked')?boxElement.hide():boxElement.show();

    });
});

http://jsfiddle.net/1hsbzkxw/2/

Or a toggle way-

$(document).ready(function(){
    $(document).on('change','input[type="checkbox"]',function(){
        var boxElement=$(this).closest('.form-group').find('span.box');
        boxElement.toggle();
    });
});

http://jsfiddle.net/1hsbzkxw/3/

Explanation- 

var boxElement=$(this).closest('.form-group').find('span.box');

$(this) - is the current target on which event is being triggered, In your case this is a checkbox.

Now from it's hierarchy in the DOM It finds the most immediate(closest) element with calss .form-group. In your case this class is at the most parent div.form-group.

Next- Now it searches for the span with class box, Apparently inside the class .form-group.

Once it finds the element, then it gets the state of this element whether it is hidden or shown on the DOM.

If its hidden then toggle shows it and if its shown toggle hides it. That's how toggle works.

Upvotes: 2

Related Questions