CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Tanker
Tanker

Reputation: 1196

Show box or input box on checked box

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.

Upvotes: 1

Views: 1767

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79032

$('.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();
    }
});

Upvotes: 1

mikekavouras
mikekavouras

Reputation: 220

I changed your selector. I have limited context, but this seems to be a better choice based on your provided sample.

$('.aboveage2').bind('change', function(){
  var $inputs = $(this).siblings('input').add($(this));
  var checked = false;
  for (var i = 0; i < $inputs.length; i++) {
    var input = $inputs[i];
    checked = $(input).is(':checked');
    if (checked) break;
  }
  $('#date').toggle(checked);
});

This solution simply loops through each checkbox. If the checkbox is checked then it breaks from the loop and makes sure that $("#date") is showing. Otherwise it will hide $("#date").

http://jsfiddle.net/RV4aJ/

Upvotes: 0

Related Questions