javascript - Show box or input box on checked box

Question

how can I make this work...

If I select a box it shows my input box or whatever I need to show when a box is checked ... the problem is that I have 5 check box...

so If the user select

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

up to this point the code works fine... but then he/she realize that no longer want the Box 3 and want to switch 3 for 5 ... before clic the submit button

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

When that happen the input box change from show to hide... and I don't want that since 1,2,4 and 5 still selected ...

If there where no one selected then sure show nothing... but as long as there is one selected then the input box or button or text or whatever is needed must be shown...

Here is the code for testing:

The HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

The Java

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

The link to live test: http://jsfiddle.net/GBSZ8/284/

Thank you.

Answer 1

$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Demo: http://jsfiddle.net/samliew/GBSZ8/295/

Note that live works only for jQuery 1.7 or lower. For migration to latest jQuery, see jQuery 1.9 .live() is not a function

---

UPDATE:

Your checkbox class on your website is different from the one in the question!!!

Use this selector instead:

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});