Display same div multiple times based upon dynamically generated checkbox

Question

I am currently tackling some JQuery and Javascript and I have encountered a small problem that I can't for the life of me figure out how to solve.

I have a form which dynamically loads information from a json file which re-uses a "wpTemplate" and populates a select list. This form compromises something of the following;

 <div class="wp" id="wpTemplate" >
    <input type="checkbox" id="wpCheck" name="" class="wp" value="">
    <label id="wpLabel" class="wpLabel"></label>

    <div class="uc" id="uc">
       <select class="ucSelect" id="ucSelect" name="case" multiple>
          <option id="option" class="option"></option>
       </select>
    </div>
 </div>

In essence, there could be multiple div "wpTemplate". My aim is to somehow have the ability to select either one or many "wpCheck" checkbox and for the "uc" div to display depending on the specific checkbox being selected.

I tried adding style="display: none;" to the "uc" class and a simple if-else statement with the show/hide functionality but to no avail.

$('.wp').each(function() {
   if($(this).is(":checked")) {
      $('.uc').show();
   } else {
      $('.uc').hide();
   }
});

I'm new to JQuery so any help or alternative ways would be much appreciative.

can you show some actual code and maybe comments on where you are having issues? — s_p
– s_p, Commented Aug 10, 2016 at 19:31
Better replace id wpTemplate with class: id must be unique on the page. — user4035
– user4035, Commented Aug 10, 2016 at 19:42
I made you a jsfiddle jsfiddle.net/L0bco1h5/4. I changed your ids to classes because it have to be unique. I hope this will help you. — JordanWD
– JordanWD, Commented Aug 10, 2016 at 19:50

score 2 · Accepted Answer · 2016-08-10 23:36:03Z

2

How about:

$('.wpCheck').on('change', function () {
  var $uc = $(this).closest('.wpTemplate').find('.uc')
  if ($(this).prop('checked')) {
    $uc.show()
  } else {
    $uc.hide()
  }
})

Here's a working fiddle

edited Aug 10, 2016 at 23:36

answered Aug 10, 2016 at 20:01

user5168448

Sign up to request clarification or add additional context in comments.

Comments

user4035 · Accepted Answer · 2016-08-10 20:19:41Z

0

Here is another way:

$( document ).ready(function() {
    $('input.wp').change(function() {

        var $this = $(this);
        if ($this.is(":checked"))
        {
            $this.siblings('div.uc').show();
        }
        else
        {
            $this.siblings('div.uc').hide();
        }
        });
    });

fiddle

answered Aug 10, 2016 at 20:19

user4035

24k11 gold badges69 silver badges101 bronze badges

Collectives™ on Stack Overflow

Display same div multiple times based upon dynamically generated checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related