Is it possible to implement multiple in jquery?

Question

I have a problem with multiple CheckBoxes

Markup

<p>
  <label>Display 1</label>
  <input class="show-options" id="one" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 1</p>
</div>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 2</p>
</div>

JS

jQuery(document).ready(function($){

  $('.show-options').live('change', function(){
      if( $(this).is(':checked') ) {
        $(this).parent().parent().find('.show-options-panel').show('medium');
      } else {
        $(this).parent().parent().find('.show-options-panel').hide('medium');
      }
 });

});

Is it possible to create a multiple CheckBoxes with that markup? Here's the example http://jsfiddle.net/satryabima/CupF3/1/

UPDATE

Here's the solution from my friend http://jsfiddle.net/neosheet/9y44X/

Your first problem is that your checkboxes have the same value for their ID attributes. Make them unique, and get rid of the name attributes and it should work. — Derek
– Derek, Commented Jan 12, 2013 at 12:48
I'm sorry about the ID attributes, it just an example markup :) — Satrya
– Satrya, Commented Jan 12, 2013 at 12:54

thomas · Accepted Answer · 2013-01-12 12:58:34Z

1

You just gave your showpanel the same class so that when one checkbox activated your .show-options-panel the other one won't show the same panel again, because it's already visible with the wrong text of course. And your checkboxes have the same id, that's not cool.

To get a feeling of what is clicked, you should edit your code like this:

HTML

<p>
  <label>Display 1</label>
  <input class="show-options" id="first" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

JS

$(function() {
    $('.show-options').on('change', function(){
        if( $(this).is(':checked') ) {
            console.log($(this).attr("id") + " checked");
        } 
        else {
            console.log($(this).attr("id") + " unchecked");
        }
    });
});

If you than open your Javascript Console Window in your Browser, you see what's going on. Another option would be to use two show panels with different text and different id and you show and hide them based on the id or some other deterministic attribute of the checkboxes, like value or data-attribute.

Cheers.

edited Jan 12, 2013 at 12:58

answered Jan 12, 2013 at 12:50

thomas

2,5881 gold badge22 silver badges29 bronze badges

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

4 Comments

Satrya Over a year ago

I see one checked, one unchecked, second checked , second unchecked .So, basically my markup is not possible to implement the mulitiple checkboxes?

thomas Over a year ago

What should it display in your opinion? Or what do you want to see?

Satrya Over a year ago

I need like jsfiddle.net/mambows/CupF3/2 , but the problem is I can't change the markup :(

thomas Over a year ago

Congrats, but your question was not very precise then.

Collectives™ on Stack Overflow

Is it possible to implement multiple in jquery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related